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>

 

4.具體參數配置 方法見：http://echarts.baidu.com/