echarts如何给柱形图的每个柱子设置不同颜色
总结下这几日用echarts库作基本图形遇到的一些问题。
echarts快速上手可参考官网:
http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
在作柱形图时,如果需要给每个柱子设置不同颜色,参考以下说明:

var option = {
xAxis: {
data: ["苹果","小米","华为","其他"]
},
yAxis: {
splitLine:{ show:false} //改设置不显示坐标区域内的y轴分割线
},
series: [{
name: '手机品牌',
type: 'bar',
data: [19, 15, 40, 32],
//设置柱子的宽度
barWidth : 30,
//配置样式
itemStyle: {
//通常情况下:
normal:{
//每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度,则柱子颜色循环使用该数组
color: function (params){
var colorList = ['rgb(164,205,238)','rgb(42,170,227)','rgb(25,46,94)','rgb(195,229,235)'];
return colorList[params.dataIndex];
}
},
//鼠标悬停时:
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
}],
//控制边距
grid: {
left: '0%',
right:'10%',
containLabel: true,
},
};
echarts如何给柱形图的每个柱子设置不同颜色的更多相关文章
- echarts图表x,y轴的设置
https://www.cnblogs.com/cjh-strive/p/11065005.html xAxis属性代表echarts图表的x轴设置代码如下 xAxis : [ { type : 'c ...
- highcharts设置Y轴范围及根据Y轴范围设置不同颜色
yAxis : { title : { text : '数据' }, plotLines : [ { value : 0, width : 1, color : '#808080' } ], min: ...
- ECharts图表实战经验1:如何设置图表同序列不同数据点的独立颜色值
最近有不少朋友在追问这样一个问题:我单序列的柱状图,我想让每一个根柱子的颜色都不一样,应该如何做? 针对这个问题,其实我只想说你压根没有认真看完或者查找ECharts官方的示例,官方能够找到的示例有: ...
- echarts tree 树型图层级距离设置
网上找了半天,没有找到设置层级距离的属性,默认是自动适应的,无奈只能改源码,分享出来希望可以帮到有相同需求的... 上github下载echarts源码包,打开src=>chart=>tr ...
- PHP Echarts Ajax Json柱形图示例
<?php $server = '127.0.0.1'; $user = 'root'; $password = ''; $database = 'yiibaidb'; $conn = new ...
- echarts 表格与 div 之间 空白的设置
一. options 图表选项,包含图表实例任何可配置选项: 公共选项 , 组件选项 , 数据选项 {Object} grid 二. grid 直角坐标系内绘图网格 名称 默认值 描述 {number ...
- echarts爬坑 : 怎么Line折线图设置symbol:none后Label不见了?
用 echarts 时遇到了一个奇奇怪怪的问题. 这是一张折线图. 本来这个图是有数字显示的. series : [ { name:'搜索引擎', type:'line', stack: '总量', ...
- echarts柱状图每个柱子显示不同颜色,并且能够实现点击每种颜色影藏对应柱子的功能
---------------------------------------------------------代码区---------------------------------------- ...
- echarts绘制饼图时的一点特殊设置
最后的效果如图,需要在中间展示的部分换行然后字体大小不同. 以下为option的设置,使用rich里面的参数来设置更多的文本样式,使用‘\n’来控制换行 let option = { color: c ...
随机推荐
- edge
https://www.cnblogs.com/st-leslie/p/6784990.html
- SpringBoot之显示本地图片范例
controller // 扫描指定目录下的图片进行展示 @RequestMapping("/showPics") public ModelAndView showPics(Mod ...
- 转 Pycharm及python安装详细教程
转 : http://blog.csdn.net/qq_29883591/article/details/52664478 首先我们来安装Python 1.首先进入网站下载:点击打开链接(或自己输入网 ...
- LDOOP设置关联后超出新起一页LinkNewPage
关联打印的时候,top,left关联位置是相对于被关联打印项的偏移值,具体可查看本博客相关介绍博文:LODOP打印控件关联输出各内容 正常情况下,超文本超过打印项高度,或纸张高度会自动分页,如果超文本 ...
- 转载:关于JESD204B转换器与FPGA匹配的设计关键点
http://www.dzsc.com/data/2014-11-27/107442.html 随着更多的模数转换器(ADC)和数模转换器(DAC)支持最新的JESD204B串行接口标准,出现了FPG ...
- hdu-3294(最长回文子串)
题意:给你一个字符和一个字符串让你求出最长回文子串并且输出来,答案需要根据给出的字符转换一下,就是将给出的字符认定为a,然后依次向后推: 解题思路:manacher模板+一些处理 代码: #inclu ...
- 基于 vue+vue-router+vuex+axios+koa+koa-router 本地开发全栈项目
因为毕业设计要做基于Node服务器的项目,所以我就想着用刚学的vue作为前端开发框架,vue作为Vue.js应用程序的状态管理模式+库,axios基于promise用于浏览器和node.js的http ...
- Codeforces Round #440 Div. 1
A:显然应该尽量拆成4.如果是奇数,先拆一个9出来即可. #include<iostream> #include<cstdio> #include<cmath> # ...
- A - 敌兵布阵 HDU - 1166 线段树(多点修改当单点修改)
线段树板子题练手用 #include<cstdio> using namespace std; ; int a[maxn],n; struct Node{ int l,r; long lo ...
- Ionic的页面堆栈与Tabs菜单相遇的问题(页面堆栈有多个)
本来的需求: 新建的Ionic项目是Tabs菜单,假设有两个选项卡 A 和 B(从左到右),对应的两个页面的代码完全一样,使用了echarts 插件,并且使用了一个获取页面元素的方法,给自己的一个变量 ...