使用echarts画饼状图，设置饼状图颜色

前言：

使用echarts遇到过的坑：

一定要给图表容器添加宽度与高度。
图表在容器中可以调整位置，让图表显示的更完整。

今日分享重点：画饼状图。
1.引入相关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.确定容器

<div id="pie" style="width: 600px; height: 325px; margin-top: 100px; margin-left: 200px;">
</div>

3.定义画饼状图的方法，配置图表参数

/*** 画饼图，主要用来画入郑、出郑行程时间统计* @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});// 显示 tooltippieChart.dispatchAction({type : 'showTip',seriesIndex : 0,dataIndex : app.currentIndex});}}, 3000);
}

4.调用方法，传递参数

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.划重点

设置饼状图每个颜色块的颜色可以使用color属性，这样就可以避免在具体的数据中每条数据再加样式。
方法中有一个定时器，用来定时跳动每个颜色块。
*其它一些小细节，有注释可以参考。

6.上图

使用echarts画饼状图，设置饼状图颜色相关推荐

使用echarts画树图，并设置节点为不同的图片
先看一下效果图: 这是树图的单方向发散:在html页面中的代码如下:(这里的echarts.js文件是在本地通过script标签引入的,在vue项目中的话,想要画树图的话,一定要使用script标签引 ...
html动态图片怎么设背景,微信8.0状态背景视频怎么设置？状态视频动态背景图设置教程[多图]...
微信8.0状态背景视频怎么设置?许多人可能都还并不是很了解微信8.0的我的状态功能要怎么设置动态的视频作为背景图.现在就让小编为各位分享,微信8.0状态背景视频设置教程. 微信8.0状态背景视频怎么设 ...
微信小程序中，将一张图设置成背景图的几种方式
三种方法实现 1.使用网络图片 <view class="page" style=" background-image: url('{{ossHost}}nmxy/ ...
贴图通道、贴图类型和材料类型
一.标准材质贴图通道的使用 1.环境反射贴图(Ambient):饱和的纹理贴图可以通过调整Ambient贴图副本输出来得到.在降低Offset的同时,增加RGB Level就可以把光的颜色增强到中等范 ...
python饼状图颜色一样_使用echarts画饼状图，设置饼状图颜色
前言: 前面已经跟大家分享了使用echarts画柱状图.折线图,一些之前自己遇到的坑也跟大家说了,这次就不再赘述.官方有配置文档,很详细,大家不懂的地方也可以交流. 今日分享重点:画饼状图. 1.引入 ...
echarts设置饼状图的标示线以及标示文字的颜色等相关样式
一.代码和注释如下: var option ={series: [{name: 'KR完成比例',type: 'pie',//类型为饼图radius: ['30%', '50%'],//饼图的半径,一 ...
python excel数据分析画直方图饼状图_Excel数据可视化应用（直方图、折线图、饼状图）...
直方图:对比关系直方图是一种统计报告图,是表示资料变化情况的主要工具.直方图由一系列高度不等的的纵向条纹或线段表示数据分布的情况.一般用横轴表示数据类型,纵轴表示分布情况. 例1: 1.右键单击图表 ...
echarts实用篇（一）——饼状图
echarts实用篇(一)--饼状图从官网上我们可以看到通常用到的有这几类: 常规饼状图环形图嵌套环形图纹理饼图南丁格尔玫瑰图定制饼状图下面来看看各类的基本做法,直接使用官网上的例子. ...
用matlab画饼状图和相量图
用matlab画饼状图和相量图 subplot(1,2,1); pie([2347,1827,2043,3025]); %pie表示画饼状图 title('pie chart'); legend('q ...

使用echarts画饼状图，设置饼状图颜色

使用echarts画饼状图，设置饼状图颜色相关推荐

最新文章

热门文章