在vue中使用vue-echarts-v3

本文详细介绍了如何在Vue项目中使用vue-echarts-v3,包括安装步骤、用法说明和实际例子。重点在于按需导入ECharts图表和组件,以及在组件大小变化时自动更新视图。同时,提到了动态数据的处理方式,可以从父组件传递或组件内部直接获取。

特征

  • 轻量,高效,按需绑定事件
  • 支持按需导入ECharts.js图表​​和组件
  • 支持组件调整大小事件自动更新视图

一、安装

npm install --save echarts vue-echarts-v3
 

二、用法

用 vue-cli 搭建的项目,打开 build 文件夹中的 webpack.base.conf.js 文件

1、webpack 1.x 修改成如下


 
  1. {
  2. test: /\.js$/,
  3. loader: 'babel',
  4. include: [
  5. path. join(prjRoot, 'src'),
  6. path. join(prjRoot, 'node_modules/vue-echarts-v3/src')
  7. ],
  8. exclude: / node_modules(?![\\/]vue-echarts-v3[\\/]src[\\/])/
  9. },

2、webpack 2.x 修改成如下


 
  1. {
  2. test: /\.js$/,
  3. loader: 'babel-loader',
  4. include: [ resolve( 'src'), resolve( 'test'), resolve( 'node_modules/vue-echarts-v3/src')]
  5. }

3、导入所有图表和组件

import IEcharts from 'vue-echarts-v3/src/full.js';
 

4、手动导入ECharts.js模块以减少捆绑包大小


 
  1. import IEcharts from 'vue-echarts-v3/src/lite.js';
  2. import 'echarts/lib/component/title'; //引入标题组件
  3. import 'echarts/lib/component/legend'; //引入图例组件
  4. import 'echarts/lib/component/tooltip'; //引入提示框组件
  5. import 'echarts/lib/component/toolbox'; //引入工具箱组件
  6. // ...(引入自己需要的)
  7. import 'echarts/lib/chart/pie'; //以饼图为例

三、例子

关于Echarts的API使用参照 Echarts官网

  • 从接口获取的动态数据可以直接通过props从父组件传过来,替换下面的series[0].data数组中的数据
  • 也可以从这个组件中从接口获取动态数据。但option属性对应的变量pie必须写在computedreturn出来,不能再写在data中,否则获取不到数据

 
  1. <template>
  2. <div class="echarts">
  3. <IEcharts :option="pie" @ready="onReady" @click="onClick"> </IEcharts>
  4. </div>
  5. </template>
  6. <script>
  7. import IEcharts from 'vue-echarts-v3/src/lite.js';
  8. import 'echarts/lib/component/title'; //引入标题组件
  9. import 'echarts/lib/component/legend'; //引入图例组件
  10. import 'echarts/lib/chart/pie';
  11. export default {
  12. components: {IEcharts},
  13. data: () => ({
  14. pie: {
  15. title: {
  16. text: 'ECharts Demo'
  17. },
  18. tooltip: {},
  19. legend:{
  20. type: 'plain',
  21. orient: 'vertical',
  22. right: 10,
  23. top: 20,
  24. },
  25. series: [{
  26. type: 'pie',
  27. data: [
  28. { name: 'A', value: 1211},
  29. { name: 'B', value: 2323},
  30. { name: 'C', value: 1919}
  31. ]
  32. }]
  33. }
  34. }),
  35. methods: {
  36. onReady(instance) {
  37. console.log(instance);
  38. },
  39. onClick(event, instance, echarts) {
  40. console.log( arguments);
  41. }
  42. }
  43. };
  44. </script>
  45. <style scoped>
  46. .echarts{
  47. width: 400px;
  48. height: 400px;
  49. margin: auto;
  50. text-align: center;
  51. }
  52. </style>

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值