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/