echarts 颜色设置
来源:互联网 发布:nginx 经典书籍 编辑:程序博客网 时间:2024/06/05 03:16
对于echarts,因为工作原因,用的比较多,但是,在echarts图中,因为颜色需要代表一定的意义,所以,echarts的颜色设置非常重要。
针对于颜色设置,我现在主要的使用的是2种方法:
1,设置colorList,然后图片的颜色一次从colorList中选取;代码如下
var option={ tooltip : { trigger: 'axis' }, dataZoom: { show: true, start : 0, }, legend: { data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis : [ { type : 'category', boundaryGap : false, data : ['周一','周二','周三','周四','周五','周六','周日'] } ], yAxis : [ { type : 'value' } ], color:['#62d1de','#54d6b6','#a6db69','#ffd454','#ffa361','#d1d1d1'],//在这里设置colorList,是一个数组,图片颜色会按顺序选取 series : [ { name:'邮件营销', type:'line', data:[120, 132, 101, 134, 90, 230, 210] }, { name:'联盟广告', type:'line', data:[220, 182, 191, 234, 290, 330, 310] }, { name:'视频广告', type:'line', data:[150, 232, 201, 154, 190, 330, 410] }, { name:'直接访问', type:'line', data:[320, 332, 301, 334, 390, 330, 320] }, { name:'搜索引擎', type:'line', label: { normal: { show: true, position: 'top' } }, data:[820, 932, 901, 934, 1290, 1330, 1320] } ]};这种方式设置颜色,相对比较简单,但是不能一一对应的设置颜色。
2.通过设置itemStyle来设置,简化期间,看下item
itemStyle:{normal:{color:function(value){if(value.data.name=="正面")return "#8CC152";else if(value.data.name=="中性")return "#FFCE54";elsereturn "#ED5565";该方式,当种类比较多的时候会很麻烦,但是能准确的为每个种类改变颜色。
为自己工作中学习到的东西做个记录,让大家看看有什么不对的地方,相互交流,仅此而已。
0 0
- echarts 颜色设置
- ECharts地图颜色-选中颜色设置
- 为echarts的叠加柱状图设置颜色
- Echarts tooltip 自定义formatter设置字体颜色
- echarts 柱状图 ,颜色和显示设置
- echarts设置折线拐点中心的颜色
- ECharts 设置折线颜色和小圆点颜色
- Echarts字体和线条颜色设置操作笔记
- ECharts 设置地图(map)值变化颜色(visualMap)
- echarts饼图label字体颜色设置并且居中显示
- Echarts设置字体和线条的颜色相关操作笔记
- echarts-设置折线图中折线线条颜色和折线点颜色
- echarts设置折线图中折线线条颜色和折线点颜色
- echarts设置折线图中折线线条颜色和折线点颜色
- Echarts 柱状图颜色控制
- 【echarts】修改柱状图颜色
- ECharts 仪表盘改变颜色
- echarts颜色渐变
- let命令
- 30万以内数据 NPOI导出Excel
- SSL JudgeOnline 1210——最佳浏览路线
- linux常用命令
- HDU3068 最长回文 manachar Pascalの多行字符串输入
- echarts 颜色设置
- leetcode412 笔记
- 删数问题
- wdcp常见组件安装方法
- 第十四周--平衡二叉树
- iOS - 关于轮播图的实现实例
- NavigationView的简单使用
- HBASE 结构详解(转载)
- nmap端口扫描