Vue.js 2 Echarts库指令– Vue-Echarts

Vue.js 2 Echarts库指令– Vue-Echarts
插件名称 Vue-Echarts
发布时间 2020年11月9日
插件作者 panteng

Vue-Echarts是用于 在Vue.js 2.x应用程序中使用Echarts的自定义指令 。

安装和下载:

# NPM
$ npm install vue-echarts --save

用法

在您的Vue.js应用中将Vue-Echarts注册为指令:

 import Vue from 'vue';
 import V_Echarts from 'vue-echarts-directive';

 const App = new Vue({
     ...
     directives: {
         'echarts': V_Echarts
     }
     ...
 }

图表需要一个dom元素来绘制图表。您可以使用<div>。确保为此提供适当的宽度和高度<div>

 <div id="this-is-bar-chart" class="chart"></div>
 .chart {
     width: 100%;
     height: 400px;
 }

v-echarts向此指令添加指令div。并将Echarts选项的对象分配给v-echarts。该对象应在您的main.js文件中定义。


 <div id="this-is-bar-chart" class="chart" v-echarts="barChartOptions"></div>


 ...
 const App = new Vue({
     ...
     data: {
         barChartOptions: {
             tooltip: {},
             xAxis: {
                 data: ['A', 'B', 'C', 'D', 'E']
             },
             yAxis: {},
             series: [
                 {
                     name: 'Num',
                     type: 'bar',
                     data: [5, 20, 36, 10, 10]
                 }
             ]
         }
     }
     ...
 }
  1. 此时,您应该在浏览器中看到漂亮的条形图。
  2. 对于动态数据更新,您需要在数据更新时,将Echarts选项的新对象重新分配给变量barChartOptionsEVERY TIME。不要修改旧barChartOptions对象,因为它不会触发Vue中的反应性,因此Echarts不会更新图表。有关更多详细信息,请参见此仓库的main.js文件中的代码。
  3. 如果您需要访问Echarts实例,可以通过以下方法进行操作:
 ...
 mounted: function () {
     const barChartElement = document.querySelector('#this-is-bar-chart');
     console.log(barChartElement.echartsInstance);
     // you can access an Echarts instance at the `mounted` stage of the parent VM,
     // by accessing the `echartsInstance` property of the element
     // that v-echarts directive is bind with
 }
 ...