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);
}