echarts 柱状图 ,颜色和显示设置
最近在使用echart开发图标,api里面虽然有些设置,但是如果想让柱状图每个柱的颜色都不相同,简单的通过color设置是没有作用的,这里,就要用到其他的方式了
下面只是列举下我认为比较常用的,其他的比较简单,就不说了
xAxis : [{type : 'category', // name:'额度', //这是设置的false,就不不显示下方的x轴,默认是true的show: false, //这里呢,就是每个柱的name了,根据实际情况下就好了,我就先写这三个data : ['最多','平均','最少'],axisLabel: { //这个是倾斜角度,也是考虑到文字过多的时候,方式覆盖采用倾斜 // rotate: 30, //这里是考虑到x轴文件过多的时候设置的,如果文字太多,默认是间隔显示,设置为0,标示全部显示,当然,如果x轴都不显示,那也就没有意义了interval :0}}],yAxis : [{type : 'value',name:'数量', //下面的就很简单了,最小是多少,最大是多少,默认一次增加多少min: 0,max: 30,interval: 6, //下面是显示格式化,一般来说还是用的上的axisLabel: {formatter: '{value} 包'}}],series : [{name: '数量',type: 'bar',itemStyle: {normal: { //好,这里就是重头戏了,定义一个list,然后根据所以取得不同的值,这样就实现了,color: function(params) {// build a color map as your need.var colorList = ['#C1232B','#B5C334','#FCCE10','#E87C25','#27727B','#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD','#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'];return colorList[params.dataIndex]}, //以下为是否显示,显示位置和显示格式的设置了label: {show: true,position: 'top', // formatter: '{c}'formatter: '{b}\n{c}'}}}, //设置柱的宽度,要是数据太少,柱子太宽不美观~ barWidth:70,data: [28,15,9,4,7,8,23,11,17]}]
效果就是这样啦
转载于:https://www.cnblogs.com/kang543418095/p/5964397.html
echarts 柱状图 ,颜色和显示设置相关推荐
- echarts柱状图颜色渐变样式
option: {title: {text: ''},color: [{type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{ offset: 0, c ...
- ECharts柱状图颜色设置
option = {xAxis : [{type : 'category',data : ['Mon', 'Tue', 'Wed'],axisTick: {alignWithLabel: true}} ...
- echarts 柱状图颜色_echarts的实战案例一些(二)
之前的大数据项目又又又又改版啦,BTW,UI和生产童鞋又要给我们的工作增加难度啦...好吧,看下这次改版的一些目标样式吧~~ 水滴柱状图: 关键词:柱状图.水柱型 难点:光柱位置调整.颜色及阴影配置 ...
- 【Vue ECharts开发】自定义echarts柱状图颜色渐变效果
1. 效果演示 2. 示例代码 Vue 模板代码: <template><div><div id="main"></div>< ...
- echarts 柱状图渐变色背景
如何制作柱状图渐变色背景,我们可以先参考 echarts 柱状图颜色设置.接下来我们来实战一下,看看这次的效果图吧. 首先我们可以看到,X 轴表示数据,Y轴表示类别.柱状图上有该地区的数量,同时柱状图 ...
- echarts柱状图的样式调整及应用
一.在项目中引进echarts echarts官网:快速上手 - Handbook - Apache ECharts,点击左侧导航栏的"入门篇"中的"在项目中引入 Apa ...
- echarts柱状图,改变柱状颜色
在使用echarts产生的柱状图中,有时候自动产生的颜色大不如人意,可以通过以下参数进行修改. series : [{name:'天数',type:'bar',stack: '天',data:[30, ...
- echarts柱状图改变标签的位置及柱状图颜色
echarts柱状图改变标签的位置(柱状图里面的数值位置)及柱状图颜色 在 series里面改变label对象里面的label属性 import * as echarts from 'echarts' ...
- 点击echarts柱状图动态改变数据项颜色样式
首先附上参考文章连接:https://blog.csdn.net/weixin_42870683/article/details/103528254添加链接描述 今天来实现点击echarts柱状图,动 ...
- Echarts 柱状图、饼状图等变换颜色、渐变色
Echarts 柱状图.饼状图等变换颜色.渐变色 本文只总结了几种用到过的方法,当然,方法远不止这些.以下实测有效.之后如果遇到测试成功的方法,也会对文章进行更新.其中很多参数可以自行测试修改. 方法 ...
最新文章
- 设计中最常用的CSS选择器
- 运行时修改数据库连接字符串(ConnectionString)
- python列表的用法
- 文本域字数限制统计(不区分中英文 符号)
- sklearn自学指南(part24)--随机梯度下降
- 全分布式集群搭建总结
- C# ?. 判斷Null值
- centos6 python3 django-uwsgi-nginx使用supervisor作为uWSGI的守护进程
- 华为AI开发平台ModelArts介绍和应用
- Material Design(二)--色彩样式
- 5G无线技术基础自学系列 | 大规模天线阵列
- 如何定制支持用户自定义boot参数的基于debian os的live cd
- 保护眼睛颜色的RGB数值
- JSHOP2学习3:基础语法(上)
- 矩阵出现重复特征值,其特征向量的简便求法
- 删除链表重复节点 python_Word里面如何删除空白页?删除Word空白页的六种方法
- React AntV/G2Plot环形图Pie添加点击事件,即点击图环触发获取相关数据。
- 计算机电脑Windows系统中了faust勒索病毒,phobos勒索家族介绍,Windows用户注意
- 漏洞复现----6、Jenkins远程命令执行漏洞(CVE-2018-1000861)
- 创业思维的误区 (余世维)
热门文章
- 【HDU - 5706】GirlCat(bfs)
- 【POJ - 1837】Balance(dp及其优化)
- 【HRBUST - 1613】迷宫问题 (bfs)
- 【牛客 - 181D】小叶的巡查(树的直径,数学)
- 【HDU - 3038】How Many Answers Are Wrong (带权并查集--权为区间和)
- CSS中属性个属性值怎么区分,[CSS] 详细解释 @media 属性与 (max
- python3所支持的整数进制_Python3快速入门(三)——Python3标准数据类型
- 五轴编程_沙井万丰数控数控编程五轴编程那个软件好用
- Linux | 高级I/O函数
- Redis:14---常用功能之(Pipeline)