echarts饼图样式记录
饼图
- //初始化饼图
var mychart
option = {
legend: { //图例组件
orient: 'vertical', //水平布局
right: '40', //距离右边的位置
top: 'middle', //距离顶部的样式
icon:'rect', //
itemHeight: 12, // icon高度
itemGap: 40, //间距
textStyle: { //设置图例的 文字样式
color: '#fff',
fontSize:16
},
formatter: function (name) { //通过回调自定义显示的样式
var index = legendData.indexOf(name);
var a = name.split(':')[0]
return a
}
//没有formatter时采用默认形式 如下
//data:['吃饭','睡觉','喝水']
},
toolbox: { //工具栏: 导出图片 数据视图 动态类型切换 数据区域缩放 重置等5个工具
show: true,
feature: {
// mark: { show: true },
// dataView: { show: true, readOnly: false },
//restore: { show: true },
// saveAsImage: { show: true } //
}
},
series: [
{
name: '面积模式',
type: 'pie',
radius: [80, 150], //第一项是内半径 第二项是外半径 通过这个可以控制饼图大小
center: ['40%', '50%'], //位置
roseType: 'area', //area radius
itemStyle: {
borderRadius: 5
},
data: ['20','40','60'],
color: ['#E56E6E', '#00C0DD', '#2CBA83', '#FEB763'],
labelLine: { //视觉引导线
normal: {
lineStyle: { //改变标示线的颜色
color: '#fff'
}
}
},
label: {
normal: {
textStyle: { //改变标示线的颜色
color: '#fff'
}
}
}
},
]
};
mychart = echarts.init(document.getElementById('pie-data'));
mychart.setOption(option);
}
相关样式
1.图例项的icon
legend: { //图例组件
icon:'rect', //circle圆形 rect长方形 roundRect 圆角长方形 triangle 三角形 diamond 菱形 pin arrow
}
根据页面大小重布局图表
//重布局大小
setTimeout(function () {
window.onresize = function () {
myChart.resize();
}
}, 200)
轮播展示高亮数据
//轮播展示
var currentIndex = -1;
if (option.series.length !== 0) {
timer = setInterval(function () {
var dataLen = option.series[0].data.length;
// 取消之前高亮的图形
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0, //表示series中的第几个data数据循环展示
dataIndex: currentIndex
});
currentIndex = (currentIndex + 1) % dataLen; //+1表示每次跳转一个
// 高亮当前图形
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: currentIndex
});
// 显示 tooltip
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: currentIndex
})
}, 2000);
}