1.安装
npm install echarts vue-echarts -S
2.全局注册
import Vue from 'vue'
import VueECharts from 'vue-echarts'
import Echarts from 'echarts'
import EchartsGL from 'echarts-gl'
import 'echarts-liquidfill' // echarts水球
import 'echarts/theme/macarons' // echarts theme// 全局注册echarts组件
Vue.component('v-chart', VueECharts)
Vue.prototype.$echarts = Echarts
Vue.prototype.$echartsGL = EchartsGL
3.页面引用
<div class="chart-contanier"><div class="chart-box"><v-chartref="echarts":options="optionsOne"theme="macarons":autoresize="true"style="font-family: Digital"/></div>
</div>
export default {name: 'Index',data() {return {queryParams: {teamId: this.$store.getters.teamId,projectId: this.$store.getters.projectId,contractSectId: undefined},optionsOne: {},optionsTwo: {},optionsThree: {},optionsFour: {},optionsFive: {},labelData1: [],labelData: [],total: 1,eOne: 1,eTwo: 1,eThree: 1,eFour: 1,eFive: 1,center: ['45%', '50%'],left: '43%',x: '43%',y: '37%'}},created() {this.getCount()},mounted() {},methods: {getCount() {chartCount(this.queryParams).then(res => {this.eOne = res.data.smz[0].statisCountres.data.count.forEach(i => {this.total += i.statisCount})this.getOptions()})/*//接口数据trainCount(this.queryParams).then(res => {res.data.count.forEach(item => {switch (item.trainingType) {case 'type1':this.eTwo = item.countsbreakcase 'type2':this.eThree = item.countsbreakcase 'type3':this.eFour = item.countsbreakcase 'type4':this.eFive = item.countsbreak}})})*/this.getOptions()/* listLabourEmployee(this.queryParams).then(res => {this.total = res.data.length})*/},getOptions() {var sumOne = this.eOne / this.totalvar percentOne = Math.round(sumOne * 1000000) / 10000this.optionsOne = {textStyle: {fontFamily: 'Digital'},grid: {top: 0,bottom: 0,left: 0,right: 0},title: [{text: percentOne.toFixed(1) + '%',textAlign: 'center',textStyle: {fontSize: '25',color: '#00FAA8',textAlign: 'center',fontFamily: 'Digital'}},{text: '人员实名制',left: '43%',bottom: '0%',textAlign: 'center',textStyle: {fontSize: 14,fontWeight: '400',color: '#02D9FD',textAlign: 'center'}}],polar: {radius: ['85%', '75%'],center: ['50%', '50%']},angleAxis: {max: 100,show: false},radiusAxis: {type: 'category',show: true,axisLabel: {show: false},axisLine: {show: false},axisTick: {show: false}},series: [{name: '内部进度条',type: 'gauge',center: ['45%', '50%'],radius: '75%',splitNumber: 10,axisLine: {lineStyle: {color: [[sumOne, new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0.1,color: '#2FA0FF'}, {offset: 1,color: '#45FFE7'}])],[1, '#262795']],width: 10}},axisLabel: {show: false},axisTick: {show: false},splitLine: {show: false},itemStyle: {show: false},detail: {show: false},label: {show: false},title: { // 标题show: false},data: [{name: 'title',value: this.eOne}],pointer: {show: false}}]}this.optionsOne.series[0].center = this.centerthis.optionsOne.title[0].x = this.xthis.optionsOne.title[0].y = this.y}}
}
</script><style lang="scss" scoped>.echarts {width: 100%;height: 100%;}.chart-box {width: 100%;height: 100%;}.chart-contanier{height: 100%;width: 20%;}
</style>