1.安裝echarts:? cnpm/npm i?echarts -S

2.main.js中? ?import echarts from 'echart'? ??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/

?

轉載于:https://www.cnblogs.com/lhl66/p/10212694.html

總結

以上是生活随笔為你收集整理的vue使用echarts可视化图形插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。