<style?scoped>
h2?{
??text-align:?center;
??padding:?30px;
??font-size:?18px;
}
#chart_example?{
??width:?50%;
??height:?500px;
??border:?1px?solid?red;
??margin:?0?auto;
}
</style>
<template>
??<div>
????<div?id="chart_example">
????</div>
??</div>
</template>
<script>
import?echarts?from?'echarts'
export?default?{
??data()?{
????return?{}
??},
??mounted()?{
????let?this_?=?this;
????let?myChart?=?echarts.init(document.getElementById('chart_example'));
????var?builderJson?=?{
??????"all":?10887,
??????"charts":?{//數(shù)據(jù)
????????"map":?3237,
????????"lines":?2164,
????????"bar":?7561,
????????"line":?7778,
????????"pie":?7355,
????????"scatter":?2405,
????????"candlestick":?1842,
????????"radar":?2090,
????????"heatmap":?1762,
????????"treemap":?1593,
????????"graph":?2060,
????????"boxplot":?1537,
????????"parallel":?1908,
????????"gauge":?2107,
????????"funnel":?1692,
????????"sankey":?1568
??????},
????};
????let?option?=?{
??????tooltip:?{},
??????grid:?[{
????????top:?50,
????????//?width:?'50%',
????????//?bottom:?'45%',
????????left:?10,
????????containLabel:?true
??????}],//控制圖表大小
??????xAxis:?[{
????????type:?'value',
????????max:?builderJson.all,//最大值
????????splitLine:?{
??????????show:?false
????????}
??????}],
??????yAxis:?[{
????????type:?'category',
????????data:?Object.keys(builderJson.charts),//y軸
????????axisLabel:?{
??????????interval:?0,
??????????rotate:?30//傾斜
????????},
????????splitLine:?{
??????????show:?false
????????}
??????}],
??????series:?[{
????????type:?'bar',
????????stack:?'chart',
????????z:?3,
????????label:?{
??????????normal:?{
????????????position:?'right',//數(shù)字顯示位置
????????????show:?true
??????????}
????????},
????????data:?Object.keys(builderJson.charts).map(function?(key)?{
??????????return?builderJson.charts[key];
????????})
??????}]
????}
????myChart.setOption(option);
????//建議加上以下這一行代碼，不加的效果圖如下（當(dāng)瀏覽器窗口縮小的時候）。超過了div的界限（紅色邊框）
????window.addEventListener('resize',?function?()?{?myChart.resize()?});
??},
??methods:?{},
??watch:?{},
??created()?{
??}
}
</script>
