饼图的使用
使用最新的echarts
版本,引入script
文件
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.0/echarts.min.js"></script>
html
中放置一个div
便可
js
:
var myChart = echarts.init(document.querySelector('.gezhongleixing'));//括号里为div的class
var option = {
name: item[0],
type: 'effectScatter',
coordinateSystem: 'geo',
//点的大小
symbolSize: function(val) {
return val[2]/ 10;
},
//涟漪特效
rippleEffect: {
brushType: 'stroke'
},
label: {
show: true,
position: 'right',
formatter: '{b}',
color: 'inherit'
},
itemStyle: {
normal: {
//itemStyle中的color可以写回调函数哦
color: function (params){
let dd = params.data;
let dv = dd.value;
let val = dv[2];
if (val == 101){
return colors[3];
}
else if (val == 102){
return colors[1];
}
else if (val == 103){
return colors[2];
}else if (val == 100){
return colors[0];
}else if (val == 104){
return colors[4];
}else if (val == 105){
return colors[5];
}else if (val == 200){
return colors[0];
}
},
},
},
});
myChart.setOption(option);
// 4.让图表随屏幕自适应
window.addEventListener('resize', function () {
myChart.resize();
})