重要的是这一句 ：
在setOption里面加上
yAxis: {
type: "value",
name: "销量",
min: 0,
//总数
max: 3000,
//间隔数量
interval: 500,
axisLabel: {
formatter: "{value}千克",
},
// splitLine: { show: true }, //去除网格线
splitArea: { show: true }, //保留网格区域
splitLine: {
show: true,
lineStyle: {
//使用深浅的间隔色
color: ["red"], //设置颜色
},
},
},
完整代码 Hello.vue
<template>
<div
id="myChart"
:style="{ width: '500px', height: '300px', margin: 'auto' }"
></div>
</template>
<script>
export default {
name: "hello",
data() {
return {
msg: "Welcome to Your Vue.js App",
};
},
created() {
this.$emit('handleclick');
},
mounted() {
this.drawLine();
},
methods: {
drawLine() {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("myChart"));
// 绘制图表
myChart.setOption({
title: {
text: "二级部门需求表（单位:个）",
subtext: "From ExcelHome",
// sublink: "http://e.weibo.com/1341556070/AjQH99che",
},
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function (params) {
var tar = params[1];
return tar.name + "<br/>" + tar.seriesName + " : " + tar.value;
},
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: "category",
splitLine: { show: false },
data: ["总需求", "房租", "水电费", "交通费", "伙食费", "日用品数"],
},
yAxis: {
type: "value",
name: "销量",
min: 0,
//总数
max: 3000,
//间隔数量
interval: 500,
axisLabel: {
formatter: "{value}千克",
},
// splitLine: { show: true }, //去除网格线
splitArea: { show: true }, //保留网格区域
splitLine: {
show: true,
lineStyle: {
//使用深浅的间隔色
color: ["red"], //设置颜色
},
},
},
series: [
{
name: "辅助",
type: "bar",
stack: "总量",
itemStyle: {
barBorderColor: "rgba(0,0,0,0)",
color: "rgba(0,0,0,0)",
},
emphasis: {
itemStyle: {
barBorderColor: "rgba(0,0,0,0)",
color: "rgba(0,0,0,0)",
},
},
data: [0, 1700, 1400, 1200, 300, 0],
},
{
name: "生活费",
type: "bar",
stack: "总量",
label: {
show: true,
position: "inside",
},
data: [2900, 1200, 300, 200, 900, 300],
},
],
});
},
},
};
</script>
<style>
</style>
网友评论