Vue后台管理三集成echarts图表

路一步步走，代码得一个个敲，明天本人来集成了 echarts 图标，为什么要集成 echarts 了？
图表显示数据，应该是最清晰直白了，所以很多治理页面的首页都集成了。

上面应该还有一个对于每月销量支出的图表，今天在加上。

我集体没实在做过后盾治理我的项目，所以了这些后盾的样子，是参考我公司后盾治理款式和一些开源的后盾治理我的项目写的。
自身我应用的就是花裤衩的根底后盾模板，他也有一套后盾集成计划 https://panjiachen.gitee.io/v…

首先是这个海风小店, 体验后盾地址: http://www.hiolabs.com/demo/#…
账号 hiolabs 明码 hiolabs 这是一个开源电商后盾我的项目。
当初只有小程序能够应用，微信小程序搜海风小店能够下单购物。我的项目 github 地址 https://github.com/iamdarcy/h…

go 开发的开箱即用的后盾管理系统，体验后盾地址: http://demo.gin-vue-admin.com… 账号 admin 明码 123456
文档: http://doc.henrongyi.top/intr… Github 地址

我首先是去 github 搜 echart vue 插件 star 最高的就是这俩

https://github.com/ecomfe/vue… (4.9k star 百度家开源的)
https://github.com/ElemeFE/v-…（5.8k star 饿了么开源的）v-charts 文档 https://v-charts.js.org/#/
原本是想用 v-charts，然而看到 issues 很多都没人解决，代码也没有更新保护了，https://github.com/ElemeFE/v-…
加上之前看到有发帖说 Element UI 很长时间没有 commit 了 https://www.v2ex.com/t/659890

最初想想还是间接用 echarts, 当前 Element UI 看是不是也要换了

echarts 文档 https://echarts.apache.org/zh…

npm install echarts --save

~~而后再 main.js 挂载原型属性~~

// 引入 echarts  最好不要在 main.js 引入大文件, 否则整个我的项目都会援用这个 js
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

起初我问我共事，这样全局引入性能是不是有影响，他通知我一个准则，main.js尽量不要引入大文件, 最好是按需援用。
所以把 main.js 外面的引入给去掉。

转而在 单页面 援用。

单页面组件 须要时调用就援用echarts

<template>
  <div :class="className" :style="{height,width}"></div>
</template>

<script>
  import echarts from 'echarts'

  // require('echarts/theme/macarons') // echarts theme

  export default {
    name: 'PieChart',
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '300px'
      }
    },
    data() {
      return {chart: null}
    },
    mounted() {this.initChart()
    },
    // 每次销毁前清空
    beforeDestroy() {if (!this.chart) {return}
      this.chart.dispose()
      this.chart = null
    },
    methods: {initChart() {this.chart = echarts.init(this.$el, 'light')
        this.chart.setOption({
          title: {
            text: '拜访起源',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: ['PC', '微信小程序', '安卓 App', 'IOS']
          },
          series: [
            {
              name: '拜访起源',
              type: 'pie',
              radius: '55%',
              center: ['50%', '60%'],
              data: [{ value: 335, name: 'PC'},
                {value: 310, name: '微信小程序'},
                {value: 234, name: '安卓 App'},
                {value: 135, name: 'IOS'}
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        })
      }
    }
  }
</script>

<style scoped>

</style>

下面就是一个最一般的组件了，图表外面的值能够用 props 传入。

echarts 应用起来非常简单，留神最好不要在 main.js 援用。集成这些第三方的，多看看文档，就能懂个七七八八了。
放在我的项目中，比拟吃力的是业务需要，比方那些数据是要放在图片的，展现那些数据，这得是要思考的(有产品原型的话另当别论)，还有就是后端如何收集解决数据。

见集体博客 https://www.charmcode.cn/arti…

Vue后台管理三集成echarts图表

集成 echarts 图标

首先看看成果

站在伟人的肩膀上

海风小店

gin-vue-admin

如何集成 echarts

装置

页面援用

总结

GitHub 地址