Echarts 背景渐变柱状图

最新推荐文章于 2024-08-08 13:18:39 发布

weixin_33785108

最新推荐文章于 2024-08-08 13:18:39 发布

阅读量459

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/minjh/p/9068261.html

版权

var dom = document.getElementById("container");
var myChart1 = echarts.init(dom);
var app = {};
option1 = null;
 //初始化数据
    var category = ['深圳市', '东莞市', '广州市', '惠州市', '北京市', '上海市', '武汉市'];
    var barData = [7913, 4910, 3810, 2054, 988, 3979, 818]; var option1 = { title: { text: '柱状图示例', textStyle: { color: '#03a9f4' } }, legend: { data:['用户数'] }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, grid: { left: '3%', right: '16%', bottom: '3%', containLabel: true }, xAxis: { type: 'value', axisLine: { show: false, lineStyle: { color: "#ff0" } }, axisLabel: { rotate:45, //倾斜度 -90 至 90 默认为0 show: false }, axisTick: { show: false }, splitLine: { // 分隔线 show: false, // 默认显示，属性show控制显示与否  }, }, yAxis: { type: 'category', data: category, splitLine: { // 分隔线 show: false, // 默认显示，属性show控制显示与否  }, axisLine: { show: false, lineStyle: { color: "#ff0" } }, axisTick: { show: false }, offset: 10, }, series: [ { name: '数量', type: 'bar', data: barData, barWidth: 14, // barGap: 10, // smooth: true,  label: { normal: { show: true, position: 'right', offset: [5, -2], textStyle: { color: '#F68300', fontSize: 13 } } }, itemStyle: { emphasis: { barBorderRadius: 7 }, normal: { barBorderRadius: 7, color: function(params){ var colorList = [ ['#3977E6','#37BBF8'], ['#E8576C','#661C5A'] ] for(let i=0;i<barData.length;i++){ if(barData[params.dataIndex] <= 3000){ return new echarts.graphic.LinearGradient( 0, 0, 1, 0, [ {offset: 0, color: '#3977E6'}, {offset: 1, color: '#37BBF8'} ]) }else{ return new echarts.graphic.LinearGradient( 0, 0, 1, 0, [ {offset: 0, color: '#E8576C'}, {offset: 1, color: '#661C5A'} ]) } } } }, }, }, ] }; if (option1 && typeof option1 === "object") { myChart1.setOption(option1, true); }

转载于:https://www.cnblogs.com/minjh/p/9068261.html