Foreword:
Pitfalls encountered when using echarts:
- Be sure to add width and height to the chart container.
- The position of the chart in the container can be adjusted to make the chart display more complete.
Today's sharing focus: draw a pie chart.
1. Import related js
<script type="text/javascript" src="../js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="../echarts-4.2.0/echarts.min.js"></script>
2. Determine the container
<div id="pie" style="width: 600px; height: 325px; margin-top: 100px; margin-left: 200px;">
</div>
3. Define the method of drawing a pie chart and configure the chart parameters
/**
* 画饼图，主要用来画入郑、出郑行程时间统计
* @param container 容器
* @param legendData 菜单
* @param seriesData 图表数据
*/
function drawPie(container, legendData, seriesData) {
var pieChart = echarts.init(document.getElementById(container));
pieChartOption = {
tooltip : {
trigger : 'item',
formatter : "{a} <br/>{b} : {c} ({d}%)"
},
legend : {
show : true,
type : 'scroll',
orient : 'horizontal',
left : 120,
top : 20,
bottom : 20,
data : legendData,
textStyle : {
color : 'white'
}
},
//设置饼状图每个颜色块的颜色
color : [ 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple' ],
series : [ {
name : '颜色',
type : 'pie',
radius : '55%',
center : [ '53%', '50%' ],
label : {
normal : {
//饼形图显示格式
formatter : '{b|{b}} {per|{d}%} ',
rich : {
b : {
color : 'white',
fontSize : 14,
lineHeight : 33
},
//设置百分比数字颜色
per : {
color : '#00B4FB',
fontSize : 14,
padding : [ 2, 4 ],
borderRadius : 2
}
}
}
},
data : seriesData,
itemStyle : {
emphasis : {
shadowBlur : 10,
shadowOffsetX : 0,
shadowColor : 'rgba(0, 0, 0, 0.5)'
}
}
} ]
};
pieChart.setOption(pieChartOption);
var app = {};
app.currentIndex = -1;
var myTimer = setInterval(
function() {
var dataLen = pieChartOption.series[0].data.length;
if ((app.currentIndex < dataLen - 1)
&& pieChartOption.series[0].data[app.currentIndex + 1].value == 0) {
pieChart.dispatchAction({
type : 'downplay',
seriesIndex : 0,
dataIndex : app.currentIndex
});
app.currentIndex = (app.currentIndex + 1) % dataLen;
} else {
// 取消之前高亮的图形
pieChart.dispatchAction({
type : 'downplay',
seriesIndex : 0,
dataIndex : app.currentIndex
});
app.currentIndex = (app.currentIndex + 1) % dataLen;
// 高亮当前图形
pieChart.dispatchAction({
type : 'highlight',
seriesIndex : 0,
dataIndex : app.currentIndex
});
// 显示 tooltip
pieChart.dispatchAction({
type : 'showTip',
seriesIndex : 0,
dataIndex : app.currentIndex
});
}
}, 3000);
}
4. Call the method and pass parameters
var legendData = ["红色", "橙色", "黄色", "绿色", "蓝色", '靛色', '紫色'];
var seriesData = [
{name: "红色", value: 14},
{name: "橙色", value: 14},
{name: "黄色", value: 14},
{name: "绿色", value: 14},
{name: "蓝色", value: 14},
{name: "靛色", value: 14},
{name: "紫色", value: 16},
];
drawPie("pie", legendData, seriesData);
5. Focus
- You can use the color attribute to set the color of each color block in the pie chart, so that you can avoid adding styles to each piece of data in the specific data.
- There is a timer in the method, which is used to regularly jump each color block.
*For some other small details, there are notes for reference.
6. Above picture
