echarst环形进度，官网https://echarts.apache.org/examples/zh/index.html

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>

echarst环形进度，官网https://echarts.apache.org/examples/zh/index.html相关推荐

b关于bootstrap官网https://v4.bootcss.com/docs/layout/grid/关于栅格布局的学习和实践博客
一,首先,我们来认识一下什么是bootstrap 什么是Bootstrap? 工欲善其事,必先利其器,话说在前端开发中,如何快速的搭建一个网站页面呢? 在程序的世界里,最不缺的就是轮子,凡是你能想到 ...
王者荣耀官网https://pvp.qq.com/web201605/wallpaper.shtml壁纸的python爬取
链接: 王者荣耀壁纸官网. 遇到的问题此网站的壁纸显示采用了动态网页技术,也就是说用爬取一般的静态网站的方法是不行的.笔者一开始就是妄图使用大名鼎鼎的requests库的get()方法来获取该网站的 ...
注册华为云用户：访问官网 https://huaweicloud.com/ 注册华为云用户（需手机号验证）登录并完成实名认证为账号充值不少于100元（不用时可提现
3.2 步骤实现此案例需要按照如下步骤进行. 步骤一:注册华为云 1)访问官网,如图-1所示: 图-1 2)注册用户,如图-2所示: 图-2 2)登陆并完成实名认证,如图-3所示: 图-3
数据可视化-Echarts官网及社区整理
官网示例图表 Echarts是一个基于 JavaScript 的开源可视化图表库,官方提供很多基础图表,社区提供用户自己探索的变体. https://echarts.apache.org/exampl ...
java必备的官网链接
小bai必备开发工具 1. idea工具官网下载 https://www.jetbrains.com/idea/download/#section=windows 注:这些官网打不开的话是因为您之前下 ...
各软件版本、仓库、官网地址
地址 1.node所有版本地址 windows下载连接:https://nodejs.org/dist 其他系统:https://nodejs.org/en/ 2.maven依赖版本地址 https: ...
echarts.min.js从官网的下载步骤
1. echarts 官网 https://echarts.apache.org/zh/index.html 2. 点击下载 3. 选择版本的Dist,点击进入 4. 选择echarts.min.js ...
官宣了！Apache ECharts 毕业成为 Apache 软件基金会顶级项目！
2021 年 1 月 26 日,德克萨斯州威明顿市 Apache 软件基金会(ASF)是 350 多个开源项目和计划的全志愿开发者.管理者和孵化者,今天宣布 Apache® ECharts™成为顶级项 ...
MAVEN Plugins 插件官网下载
1.进入 maven官网 https://maven.apache.org 2.左侧列表,找到maven plugins ,点击进入 3.按截图方式进入,然后里面进入插件目录,所有的插件都在里面,可以 ...

echarst环形进度，官网https://echarts.apache.org/examples/zh/index.html

1.安装

2.全局注册

3.页面引用

echarst环形进度，官网https://echarts.apache.org/examples/zh/index.html相关推荐

最新文章

热门文章