如何使用echarts做饼状图
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使用echarts做饼状图相关的知识，希望对你有一定的参考价值。
参考技术A <!DOCTYPE html>2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>饼状图练习</title>
6 <style>
7 #pic1
8 width:400px;
9 height:400px;
10 margin: 20px auto;
11
12 </style>
13 <script src="js/echarts.common.min.js"></script>
14 </head>
15 <body>
16 <div id="pic1"></div>
17 <script>
18 var myCharts1 = echarts.init(document.getElementById('pic1'));
19 var option1 =
20 backgroundColor: 'white',
21
22 title:
23 text: '课程内容分布',
24 left: 'center',
25 top: 20,
26 textStyle:
27 color: '#ccc'
28
29 ,
30 tooltip :
31 trigger: 'item',
32 formatter: "a <br/>b : d%"
33 ,
34
35 visualMap:
36 show: false,
37 min: 500,
38 max: 600,
39 inRange:
40 colorLightness: [0, 1]
41
42 ,
43 series : [
44
45 name:'课程内容分布',
46 type:'pie',
47 clockwise:'true',
48 startAngle:'0',
49 radius : '60%',
50 center: ['50%', '50%'],
51 data:[
52
53 value:70,
54 name:'语言',
55 itemStyle:
56 normal:
57 color:'rgb(255,192,0)',
58 shadowBlur:'90',
59 shadowColor:'rgba(0,0,0,0.8)',
60 shadowOffsetY:'30'
61
62
63 ,
64
65 value:10,
66 name:'美国科学&社会科学',
67 itemStyle:
68 normal:
69 color:'rgb(1,175,80)'
70
71
72 ,
73
74 value:20,
75 name:'美国数学',
76 itemStyle:
77 normal:
78 color:'rgb(122,48,158)'
79
80
81
82
83 ],
84
85 ]
86 ;
87 myCharts1.setOption(option1);
88 </script>
89 </body>
90 </html> 参考技术B 看代码就好：
var myChartones = echarts.init(document.getElementById('Genders'));
var myChartoneoption =
toolbox:
show : true,
feature :
mark : show: true,
dataView : show: true, readOnly: false,
magicType :
show: true,
type: ['pie', 'funnel']
,
restore : show: true,
saveAsImage : show: true
,
legend:
x: 'center',
y: 'bottom',
data:['自理','轻度依赖','中度依赖','严重依赖'],
,
series : [
type:'pie',
radius : [40, 60],
center : ['50%', '50%'],
roseType : 'radius',
,
name:'面积模式',
type:'pie',
radius : [30, 150],
center : ['50%', '50%'],
roseType : 'area',
data:[
value:10, name:'自理',itemStyle:normal:color:'#f03f37',
value:5, name:'轻度依赖',itemStyle:normal:color:'#f7941c',
value:15, name:'中度依赖',itemStyle:normal:color:'#f86961',
value:25, name:'严重依赖',itemStyle:normal:color:'#bf1d2d'
]
]
myChartones = document.getElementById('Genders');
var myChartone= echarts.init(myChartones);
var resizeContainers = function (obj)
myChartones.style.width = (window.innerWidth/2) +'px';
myChartones.style.height = (window.innerHeight/2)+'px';
;
resizeContainers(myChartones);
myChartone.resize();
myChartone.setOption(myChartoneoption);
$(window).resize(function()
resizeContainers(myChartones);
myChartone.resize();
);
echarts中柱体的颜色，饼状图的颜色设置、、、
echarts中bar和pie两种图在用到系统后发现颜色系有点不搭，所以想找到他们的颜色设置，找了很多地方譬如itemStyle、markLine、这些都不对。有知道属性名或者有例子的麻烦给个，多谢~
自问自答吧：series-->itemStyle-->normal-->normal-->color
颜色样式为：‘#eee’
如下：
color: function (value)alert(value); return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6); 参考技术A
可以忽略掉 if(color == '变色')
以上是关于如何使用echarts做饼状图的主要内容，如果未能解决你的问题，请参考以下文章