echarts柱状图不同颜色与显示数值
来源:互联网 发布:泰安软件招聘 编辑:程序博客网 时间:2024/06/06 01:19
这几天要用echarts做一个井盖数量查询的柱状图,有几个要求:
1、要将柱体代表的数值显示在柱体顶部。
2、每个柱体要用不同的颜色显示。
解决方法:
第一个问题可以在series里设置itemStyle来显示,在normal里的label设置show:true,就可以了,还可以用textStyle来设置显示数值的格式,代码如下:
var itemStyle = { normal: { label: { show: true, textStyle: { fontWeight: 'bolder', fontSize: '12', fontFamily: '微软雅黑' }, position: 'top' }, color: function (params) { var colorList = [ '#ff7e50', '#97d3f9', '#dd70d9', '#34cf34', '#6497ef', '#85802b', '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0' ]; return colorList[params.dataIndex] } } };
position在这里就是将数值放到柱体顶部。下面的color就是将每个柱体都设置为不同颜色的,这里是写一个颜色的集合,从第一个柱体开始,会依次调用里面的颜色,如果柱体数量多于集合里颜色的种类,那么颜色就会被循环调用,所以建议将颜色的种类设置为大于柱体的数量。下面是我做出来的图,给大家参考。
阅读全文
1 0
- echarts柱状图不同颜色与显示数值
- echarts柱状图显示数值
- python画柱状图--不同颜色并显示数值
- Echarts柱状图的每个柱子显示不同颜色问题
- echarts柱状图虚线显示
- echarts柱状图显示太靠左
- ECharts柱状图百分比显示
- echarts 显示柱状图
- echarts 折线分段显示不同颜色
- echarts 为柱状图添加数值线
- echarts 柱状图头部显示头像
- echarts折线图分段显示不同颜色
- echarts折线图分段用不同颜色显示
- jfreechart柱状图顶部显示数值?
- jqplot柱状图上数值显示
- Echarts 柱状图x轴显示全部类目
- echarts 柱状图 ,颜色和显示设置
- echarts 实现柱状图左右横向显示
- 文章标题
- 关于double与float失精问题解决方案
- android studio ndk环境搭建 和开发
- 读《第一行代码》遇到问题2:Android Device Monitor 文件管理遇到的问题
- Java获得时间戳
- echarts柱状图不同颜色与显示数值
- vs命令行工具在启动时报错
- Eclipse启动都会Error when loading the SDK
- 从今天开始,记录一些自己的摸索历程
- Android Studio Error:(28,13) Failed to resolve 。。。。。 的解决方法
- MergeSort归并排序
- python 正则表达式
- 在Windows下的Homestead遇到的问题
- js面向对象设计规则