echarts环状图
来源:互联网 发布:ios升级数据丢失 编辑:程序博客网 时间:2024/04/29 01:46
依赖:见echarts柱状图
http://blog.csdn.net/zk_1325572803/article/details/78041389
body中
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM --><div id="main_s" style="height:192px;position:absolute;top:15%;left:52%;width:720px;"></div>
javascript
function huan(){ //基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main_s')); var option = { title : { text: kssj+"至"+jssj+"全部运动物占比情况", textStyle: {//主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"} fontSize: 13, fontStyle: 'normal', fontWeight: 'bold', }, x:"center" }, tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)" }, legend: { orient: 'vertical', x:'15', y:'15', data:[车,两轮车,其他,行人] //数组 }, series: [ { name:'运动物类型:', type:'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, label: { normal: { //视觉引导线 show: true, position: 'right' }, emphasis: { show: true, textStyle: { fontSize: '17', fontWeight: 'bold' } } }, labelLine: { normal: { show: true } }, itemStyle: { normal: { borderColor: "#FFFFFF", borderWidth: 1, label:{ show:true, formatter:'{b} : {c} ({d}%)' }, } }, data:[100,200,300,400] //数组 } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option);}
效果图
阅读全文
0 0
- echarts环状图
- 环状图chart.js
- Echarts图
- flex 利用饼图生成内部环状图
- jqPlot图表插件学习之饼状图和环状图
- jqPlot图表插件学习之饼状图和环状图
- jqPlot图表插件学习之饼状图和环状图
- Android中实现环状图的两种方式
- 环状序列
- 环状序列
- 环状序列
- 环状序列
- 环状序列
- 环状序列
- 环状序列
- Echarts折线图
- echarts折线图
- echarts-折线图
- Linux下nginx安装
- 服务器上配置https协议
- 微服务可能应用的设计模式
- hihocoder#1506 : 投掷硬币(概率DP)
- 百度地图几个常用的鼠标事件
- echarts环状图
- 解读The Python Tutorial(七)
- 常用正则表达式
- 小白解读微擎之路 之load()函数 ----loader.class.php
- Dubbo监控中心的介绍与安装
- android 实时监测网络变化
- 关于c++文件时error: std::ios_base::ios_base(const std::ios_base&)’是私有的错误
- oracle之PLSql语言(一)
- makefile 那些事儿