共计 2372 个字符,预计需要花费 6 分钟才能阅读完成。
集成 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 引入大文件, 否则整个我的项目都会援用这个 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 援用。集成这些第三方的,多看看文档,就能懂个七七八八了。
放在我的项目中,比拟吃力的是业务需要,比方那些数据是要放在图片的,展现那些数据,这得是要思考的(有产品原型的话另当别论),还有就是后端如何收集解决数据。
GitHub 地址
见集体博客 https://www.charmcode.cn/arti…