大概样子如下：
配置代码如下：
export const gateChartConfig = function() {
return {
color: '#ED7D31',
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
show: false, //去除刻度线
},
axisLabel: {
color: '#5A5A5A'
},
axisLine: {
lineStyle: {
color: '#E0E0E0'
}
}
},
yAxis: [
{
//左边数值部分
type: 'value',
axisTick: {
show: false, //去除刻度线
},
axisLabel: {
color: '#5A5A5A',
fontSize: 11,
interval: 0,
},
axisLine: {
lineStyle: {
color: '#E0E0E0'
}
},
splitLine: {
//网格线
show: false
}
},
{
//右边百分比部分
nameTextStyle: {
color: '#5A5A5A',
},
type: "value",
position: "right",
axisLine: {
lineStyle: {
color: "#E0E0E0"
}
},
axisTick: {
show: false,
},
min: 0,
max: 100,
axisLabel: {
textStyle: {
color: "#5A5A5A",
},
show: true,
interval: "auto",
formatter: "{value}%",
},
show: true,
splitLine: {
//网格线
show: false
}
}
],
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
barMaxWidth: 80,
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示数值
textStyle: {
color: '#5A5A5A',
fontSize: 13
}
}
}
}
},
],
grid: {
top: '10%',
left: '0%',
right: '2%',
bottom: '5%',
backgroundColor: "#fff",
containLabel: true
}
};
}
<div class="echartBody" id="echartBody"></div>
import {
gateChartConfig} from '../nlianjs/gateChartConfig.js'; //引入配置内容
data(){
return {
echartBody: null, //初始化后得echarts对象
}
}
mounted(){
this.echartBody = echarts.init(document.getElementById('echartBody'));
this.echartBody.setOption({
}, true); //阻止复用
let barGateChartConfig = gateChartConfig();
this.echartBody.setOption(barGateChartConfig,true);
let _this = this;
window.addEventListener('resize',function() {
//图标自适应
_this.echartBody.resize();
})
}
注意版本问题