<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": {//数据
"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',//数字显示位置
show: true
}
},
data: Object.keys(builderJson.charts).map(function (key) {
return builderJson.charts[key];
})
}]
}
myChart.setOption(option);
//建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
window.addEventListener('resize', function () { myChart.resize() });
},
methods: {},
watch: {},
created() {
}
}
</script>
