echarts 柱状图，分别给每个柱子设置不同的颜色

效果如图：

中见竖直的点划线为，markLine ,当markLike超出设定的数值时，颜色变成红色

代码如下：(复制代码，即可查看效果)

数据格式：
var hl_YData =[6,9,5,8,10,1,4,2,1,2,2,2]
var hl_XData = ["50-100","100-150","150-200","200-250","250-300","300-350","350-400","400-450","1450-1500","3750-3800","3800-3850","3850-3900"]
var option = {tooltip: {trigger: 'item',},label:{ // 标题的位置position:'top',show:false},xAxis: {type: 'category',data: hl_XData,name:'mΩ',nameTextStyle:{ // name的样式color:"#fff"},axisLabel:{interval:0,rotate:60,textStyle: {color: "#fff",fontSize:'10px',},},axisTick: {show: false},axisLine: {//x轴线的颜色以及宽度show: true,lineStyle: {color: "#fff",type: "solid",width: 1}},},yAxis: {type: "value",name: "区间数量",nameTextStyle:{ // name的样式color:"#fff"},axisLabel: { // y轴的文字样式textStyle: {color: "#fff"},}},series: [{data: hl_YData,type: 'bar',minBarWidth: hl_XData.length>7?20:35, // 根据数组的长度展示不同的柱子的宽度，当数据太多时，柱子变窄itemStyle: {normal: {color:(val) => {if (val.dataIndex <= hl_XData.indexOf('150-200')) { // 当柱子的数据未超过阈值var colorList = ['#97D7DB', '#97D7DB', '#EAE88A', '#EAE88A',];return colorList[val.dataIndex % 4]} else { // 当超过阈值时return '#F7782C'}},barBorderRadius: [10, 10, 0, 0],},},},{type: 'bar',markLine: {silent: true, // 鼠标移动到标记线上无操作symbol: "none",itemStyle: {normal: {lineStyle: {color: '#ff0000',}}},label: {position: 'end', // 表现内容展示的位置formatter: '',  // 标线展示的内容color: '#8C8C8C'  // 展示内容颜色},data: [{xAxis: '150-200'}]}}]}

echarts 柱状图，分别给每个柱子设置不同的颜色相关推荐

echarts 柱状图,单独一根柱子根据条件改变颜色
我这里是根据x轴数组的最后一个元素与series里面的color的val来做对比,如果相等就改变颜色 myChart.setOption({xAxis: {data: result.dep_data} ...
echarts折线图背景线_echarts设置折线线条颜色和折线点颜色的实例
本文主要介绍了jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法,结合实例形式分析了jQuery图表插件echarts设置折线图的相关操作技巧,需要的朋友可以参考下,希望能帮助到 ...
echarts 柱状图，每根柱子显示不同颜色
效果图如下: option = {title: {text: '某地区降水量',subtext: '纯属虚构'},tooltip: {trigger: 'axis'},grid: {left: '3% ...
Echarts中国地图各省份区域设置不同的颜色
摘要: 接着<Echarts引入中国地图>续写,我们的项目需求是要求地图的背景颜色要各省份不同.看了文档同时也看了相关官网例子,写出来总结下吧,以便以后需要. 实现: 1.在series中 ...
echarts地图迁徙图--根据数据设置线的颜色
直接贴代码了 var geoCoordMap = { //可以在地图上显示的城市的坐标信息 '石家庄': [114.52,38.05], '长春': [125.8154, 44.2584], '长沙' ...
ECharts 柱状排名图柱子上方显示文字与图标
直接上干货! 效果如下: 代码如下: methods: 中的方法 initChart() {let that = this;const fontColor = '#00D8FE'this.chart ...
echarts给柱状图某个柱子设置颜色
1.引用官网的例子,运行后是默认的颜色. 2.给柱状图整体设置颜色 var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {d ...
Echarts 柱状图、折线图和仪表盘的一写属性设置
目录一. 柱状图 1.背景线设置为虚线,lineStyleL里面的type属性为dashed,默认是实线. 2.鼠标放在柱子上的阴影效果,如果用shadow无法设置宽度 3.鼠标放上的tip自定义 ...
echarts柱状图的背景色设置
echarts柱状图的背景色设置方法,官方推荐的例子中是又添加一组最大值来当背景(不建议),设置backgroundStyle即可(从 v4.7.0 开始支持): series: { name: '违 ...

echarts 柱状图，分别给每个柱子设置不同的颜色

echarts 柱状图，分别给每个柱子设置不同的颜色相关推荐

最新文章

热门文章