集成echarts图标
路一步步走，代码得一个个敲，明天本人来集成了echarts图标，为什么要集成echarts了？
图表显示数据，应该是最清晰直白了，所以很多治理页面的首页都集成了。
首先看看成果
上面应该还有一个对于每月销量支出的图表，今天在加上。
站在伟人的肩膀上
我集体没实在做过后盾治理我的项目，所以了这些后盾的样子，是参考我公司后盾治理款式和一些开源的后盾治理我的项目写的。
自身我应用的就是花裤衩的根底后盾模板， 他也有一套后盾集成计划 https://panjiachen.gitee.io/v...
海风小店
首先是这个海风小店, 体验后盾地址: http://www.hiolabs.com/demo/#...
账号hiolabs 明码hiolabs 这是一个开源电商后盾我的项目。
当初只有小程序能够应用，微信小程序搜 海风小店 能够下单购物。 我的项目github地址 https://github.com/iamdarcy/h...
gin-vue-admin
go 开发的开箱即用的后盾管理系统，体验后盾地址: http://demo.gin-vue-admin.com... 账号admin 明码123456
文档: http://doc.henrongyi.top/intr... Github地址
如何集成echarts
我首先是去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引入大文件, 否则整个我的项目都会援用这个jsimport 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援用。集成这些第三方的，多看看文档，就能懂个七七八八了。
放在我的项目中，比拟吃力的是业务需要，比方那些数据是要放在图片的，展现那些数据，这得是要思考的(有产品原型的话另当别论)，还有就是后端如何收集解决数据。
GitHub地址
见集体博客 https://www.charmcode.cn/arti...