重要的是這一句 ：
在setOption里面加上
????????yAxis:?{
??????????type:?"value",
??????????name:?"銷量",
??????????min:?0,
??????????//總數(shù)
??????????max:?3000,
??????????//間隔數(shù)量
??????????interval:?500,
??????????axisLabel:?{
????????????formatter:?"{value}千克",
??????????},
??????????//???splitLine:?{?show:?true?},?//去除網(wǎng)格線
??????????splitArea:?{?show:?true?},?//保留網(wǎng)格區(qū)域
??????????splitLine:?{
????????????show:?true,
????????????lineStyle:?{
??????????????//使用深淺的間隔色
??????????????color:?["red"],?//設(shè)置顏色
????????????},
??????????},
????????},
完整代碼? 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()?{
??????//?基于準(zhǔn)備好的dom，初始化echarts實(shí)例
??????let?myChart?=?this.$echarts.init(document.getElementById("myChart"));
??????//?繪制圖表
??????myChart.setOption({
????????title:?{
??????????text:?"二級(jí)部門需求表（單位:個(gè)）",
??????????subtext:?"From?ExcelHome",
??????????//???sublink:?"http://e.weibo.com/1341556070/AjQH99che",
????????},
????????tooltip:?{
??????????trigger:?"axis",
??????????axisPointer:?{
????????????//?坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
????????????type:?"shadow",?//?默認(rèn)為直線，可選為：'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:?["總需求",?"房租",?"水電費(fèi)",?"交通費(fèi)",?"伙食費(fèi)",?"日用品數(shù)"],
????????},
????????yAxis:?{
??????????type:?"value",
??????????name:?"銷量",
??????????min:?0,
??????????//總數(shù)
??????????max:?3000,
??????????//間隔數(shù)量
??????????interval:?500,
??????????axisLabel:?{
????????????formatter:?"{value}千克",
??????????},
??????????//???splitLine:?{?show:?true?},?//去除網(wǎng)格線
??????????splitArea:?{?show:?true?},?//保留網(wǎng)格區(qū)域
??????????splitLine:?{
????????????show:?true,
????????????lineStyle:?{
??????????????//使用深淺的間隔色
??????????????color:?["red"],?//設(shè)置顏色
????????????},
??????????},
????????},
????????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:?"生活費(fèi)",
????????????type:?"bar",
????????????stack:?"總量",
????????????label:?{
??????????????show:?true,
??????????????position:?"inside",
????????????},
????????????data:?[2900,?1200,?300,?200,?900,?300],
??????????},
????????],
??????});
????},
??},
};
</script>
<style>
</style>
