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的自定义指令 。

序号插件名称序号插件名称
1Vue Wrapper For Charts.CSS 图表框架 - vue.charts.css12Vue.js创建漂亮的图表– Vue Chartkick
2Vue 3的基于SVG的图表库 - vue3-charts13交互式图表和抓图组件– vue-declarative-plots
3使用ApexCharts构建交互式可视化SVG图表 - vue3-apexcharts14Vue.js的拖放调度图表程序– scheduler-lite
4Vue 3渲染Highcharts.js图表组件​ - vue3-highcharts15Vue.js的简单反应式图表–vue-chartless
5适用于Vue.js的简单SVG图表库 - vue-simple-chart16Vue的可定制和可组合图表– vue-wcharts
6适用于Google图表的Reactive Vue.js包装器-GChart17简单的纯Vue.js图表​​组件 -pure-vue-chart
7Vue.js的现代图表库– Laue18Chart.Js创建简单和漂亮的图表 - vue-chartjs
8Vue.js 图表 Chart.js组件19使用Vue.js和Chart.js构建HTML5画布图表 - vue-chart
9Vue.js的带有SVG和Smith图表组件20Vue FusionCharts轻量级组件 - vue-fusioncharts
10Vue.js的图表库组件 - V-Charts21Vue.js中的动画条形图种族生成器
11Vue.js基于D3.js可自定义的图表​​插件22Vue和D3.js的朝阳组件 - vue-d3-sunburst

安装和下载:

# 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
 }
 ...