Echarts 柱状图、饼状图等变换颜色、渐变色

本文只总结了几种用到过的方法，当然，方法远不止这些。以下实测有效。之后如果遇到测试成功的方法，也会对文章进行更新。其中很多参数可以自行测试修改。
方法一：

itemStyle: {color:function(params) {var colorList = ['#c23531','#9BD4B9','#FFF384'];//这是一个颜色的数组return colorList[params.dataIndex]},
},

方法二：

 color: ['#c23531','#9BD4B9','#FFF384'],

方法三：（渐变）

itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: 'red' },{offset: 1, color: 'blue' }], false)}
},

方法四：（渐变）

color: [{type: 'linear',x: 1,y: 1,x2: 0,y2: 0,colorStops: [{ offset: 0, color: '#00CBD2' },{ offset: 1, color: '#AAE9CB' }]
}],

方法五：多项（渐变）

itemStyle: {color: function(params) {var colorList = [{c1: '#fce5ca',  c2: '#FF9D62'                                                                   },{c1: '#00CBD2',  c2: '#AAE9CB'},]return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //颜色渐变函数 4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始offset: 0,color: colorList[params.dataIndex].c1}, {offset: 1,color: colorList[params.dataIndex].c2}])                                    }},

运用方法三和五可能会遇到如下问题

[Vue warn]: Error in v-on handler: “ReferenceError: echarts is not defined”
ReferenceError: echarts is not defined

加上这句话就好啦。

import echarts from ‘echarts’;

Echarts 柱状图、饼状图等变换颜色、渐变色相关推荐

echarts制作饼状图如何设置不同类别之间有一定间隔？
解决echarts饼状图不同类之间有一定间隔用echarts制作饼状图时,为了有利于区分不同类别,一般通过设置不同的颜色代表不同的类别即可,但为了进一步体现不同类别之间的区分,可通过设置不同类别之间 ...
java excel 饼图,java 导入导出excle 和生成柱状图饼状图的demo/excle数据如何转成饼状图...
在EXCEL中,如何把表格中的数据转换成饼状图? 在Excel中,把中的数据转换状图的操作步骤如下: 想转换的数据源,插入饼状图,Excel会自动根据选择的数据源生成饼状图.接下来,可以自定义饼状图的 ...
python饼状图颜色一样_使用echarts画饼状图，设置饼状图颜色
前言: 前面已经跟大家分享了使用echarts画柱状图.折线图,一些之前自己遇到的坑也跟大家说了,这次就不再赘述.官方有配置文档,很详细,大家不懂的地方也可以交流. 今日分享重点:画饼状图. 1.引入 ...
使用echarts画饼状图，设置饼状图颜色
前言: 使用echarts遇到过的坑: 一定要给图表容器添加宽度与高度. 图表在容器中可以调整位置,让图表显示的更完整. 今日分享重点:画饼状图. 1.引入相关js <script type=& ...
poi导出excel文件,并生成原生图表(包括折线图,柱状图,饼状图,面积图)
前段时间,因为客户需要,要做一个导出excel文件功能,并能生成原生的图表的(不是把图片插入到excel文档),找了很多文档看,也看了很多别人的代码,个人也总结了一下,不足之处,请各位大牛谅解. 需要 ...
Echarst柱状图+饼状图+vue2 商品案例
最终效果展示: echarst非常简单,就是使用的数据需要按照规定的格式,往往是获取数据较难首先前端,只需要一个div,用ref指定名称,定好宽高,就ok,div多大,图就会自适应多大 <di ...
Word中插入表格与柱状图饼状图技术经验分享
最近公司一个项目里要求自动生成报告功能,研究了1周多,主要实现方式是通过调用微软Office COM组件来实现操作word文档,生成段落,表格,及各种图表. 本人发现操作word地方也有几个坑人的地方 ...
Superset 制作地图柱状图饼状图
文章目录制作地图制作柱状图制作饼状图制作地图 1)创建 Chart 2)配置 Chart 3)结果图制作柱状图 1)创建 Chart 2)配置 Chart 3)结果图制作饼状图 1)创建 ...
java实现将数据生成图表至excel导出(包括折线图,柱状图,饼状图)
1. 目的根据已有数据,手动(java后台)生成图表至excel并导出.用于后台查询到数据后直接创建图表,可以代替直接使用图表信息字符串. 2. 说明使用jfree图表绘制类库绘制图表,并生成到本 ...

Echarts 柱状图、饼状图等变换颜色、渐变色

Echarts 柱状图、饼状图等变换颜色、渐变色

Echarts 柱状图、饼状图等变换颜色、渐变色相关推荐

最新文章

热门文章