vue使用echarts可视化图形插件

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1.安装echarts: cnpm/npm i echarts -S

2.main.js中 import echarts from 'echarts' Vue.prototype.$echarts = echarts;

3.组件中使用：

<template>
<div class="echart_box">
<div id="myChart" :style="{width: '600px', height: '400px',margin:'0 auto'}"></div>
</div>
</template>
<script>
export default {
data() {
return { }
},
mounted() {
this.drawLine();
},
methods: {
drawLine() {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({
title: { text: 'Vue中使用echarts的demo' },
tooltip: {},
xAxis: {
data: ["橙子", "橘子", "柚子", "榴莲", "水蜜桃", "栗子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [15, 20, 37, 15, 8, 23]
}]
});
}
}
}</script>