echarts_饼图的动态展示.html

83 阅读 0 评论 55 点赞

我是靠谱客的博主热情航空，最近开发中收集的这篇文章主要介绍echarts_饼图的动态展示.html，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>echarts1</title>
<script src="echarts.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script>
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var option = {
title : {
// 标题。
text: '饼图程序调用高亮示例',
// 标题文本
x: 'center'
// 水平居中。
},
tooltip: {
// 鼠标悬浮时的工具提示。
trigger: 'item',
// 触发器：饼块。
// 格式程序。{a}，是series中对象的name属性的值
// {b}，是series中对象的data中每一条数据的name属性的值。
// {c}，是series中对象的data中每一条数据的value属性的值。
// {d}%，是series中对象的data中每一条数据所占的比例。
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
// 图例。
orient: 'vertical',
// 标定方向：垂直
left: 'left',
// 图例位于图的左或者右。
// 图例数据。
data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
series : [
{
name: '访问来源',
// 系列名
type: 'pie',
// 图类型。
radius : '55%',
// 图半径，占父元素的比例。
center: ['50%', '60%'],
// 图的中心位置。
data:[
// 饼图的数据
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
],
itemStyle: {
// 饼图的样式。
emphasis: {
// 鼠标悬浮时的效果。
shadowBlur: 10,
// 阴影大小
shadowOffsetX: 0,
// 阴影水平方向偏移。
shadowColor: 'rgba(0, 0, 0, 0.5)'
// 阴影颜色。
}
}
}
]
};
var app = {config: null, currentIndex: 0};
app.currentIndex = -1;
setInterval(function () {
// 数据条数，即饼图分成的块数。
var dataLen = option.series[0].data.length;
// 取消之前高亮的图形
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: app.currentIndex
});
app.currentIndex = (app.currentIndex + 1) % dataLen;
// 高亮当前图形
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: app.currentIndex
});
// 显示 tooltip
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: app.currentIndex
});
}, 1000);
myChart.setOption(option);
</script>
</body>
</html>