// 基于准备好的dom，初始化echarts实例
var myChart1 = echarts.init(document.getElementById(‘account‘), ‘customed‘);
// 指定图表的配置项和数据
myChart1.setOption({
// 区域缩放 dataZoom
dataZoom: [
{
type: ‘slider‘,
xAxisIndex: 0,//xAxisIndex :设置缩放组件控制的是哪个 x 轴, 一般写0即可
}
],
title: {//
text: ‘账户’,
},
tooltip: {},
xAxis: {
type: ‘category‘,
data: [
‘员1’, ‘员2’, ‘员3’, ‘员4’
]
},
yAxis: {
type: ‘value‘,
axisLabel: {
formatter: ‘{value}%’
},
},
series: [
{
name: ‘账户’,
type: ‘bar‘,
data: [ 2, 20,10,8,0,10,3 ].map(item => { //重点：超出规定值变色
if (item > 15) {
return {
value: item,
itemStyle: {
color: ‘#a90000′
}
}
}
return item
}),
markPoint: { //最大值和最小值点
data: [
{ type: ‘max‘, name: ‘Max’ },
{ type: ‘min‘, name: ‘Min‘ },
]
},
markLine: {//水平线
label: {
show: false,
position: ‘start‘,
formatter: ‘{b}’
},
data: [ //数据值为50的地方设置水平线
{
name: ‘阈值‘,
yAxis: 50, //规定的值
label: {
show: ‘true‘, //是否显示提示文本
position: ‘end‘,//提示文本位置
formatter:’50%’ //提示文本内容
}
},
{
name: ‘阈值‘,
yAxis: 30,
label: {
show: ‘true‘,
position: ‘end‘,
formatter: ‘30%’
}
}
],
lineStyle: {
color: ‘#a90000’
}
},
}
]
});
