vue调用第三方插件echarts以及如何一键快速插入

基本步骤

1. 安装echarts插件

npm install echarts -D

2. 引用与使用插件
3. index.vue文件中添加引入代码

import echarts from 'echarts'

4. 引用完之后初始化插件

<template>
  <div :class="className" :id="id" :style="{height:height,width:width}"></div>
</template>
methods: {
      initChart() {
        this.chart = echarts.init(document.getElementById(this.id))
        
      }

5. 添加数据

	data: {
        type: Object,
        default: {
          title: {
            text: '某站点用户访问来源',
            subtext: '纯属虚构',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
          },
          series: [{
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [{
              value: 335,
              name: '直接访问'
            }, {
              value: 310,
              name: '邮件营销'
            }, {
              value: 234,
              name: '联盟广告'
            }, {
              value: 135,
              name: '视频广告'
            }, {
              value: 1548,
              name: '搜索引擎'
            }],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        }
      }
      this.chart.setOption(this.data)

6. 添加更多常用的方法如：更新

update(){
        this.chart.setOption(this.data)
      }

如何用guiplan一键添加第三方插件？

众所周知真正在使用第三方插件的时候，除了要进行上面的六个步骤以外，我们对一些不熟悉的插件，去反复阅读官方文档，复制过来的案例代码还要进行反复测试反复修改才能正常运行起来。这样极大的加剧了开发时间以及投入成本。业务层都还没来得及写就被插件这块卡半天。
而guiplan网站编辑工具只需一键就将上面所有流程全部解决，从安装到使用。页面即可实时显示echarts图表。链接地址