Vue中使用echarts定制特殊的仪表盘

实现的效果：(初始化以及浏览器resize的时候数字和弧形条均为递增动画)

HTML部分：

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div class="main-echarts-contianer"ref="main">
</div>

CSS部分：

.main-echarts-contianer {width: 480px;height: 320px;display: flex;align-items: center;justify-content: center;
}

JS部分：

drawClockChart () {// 指定图表的配置项和数据let option = {'series': [{'name': '个人指标','type': 'gauge','radius': '65%','startAngle': '240','endAngle': '-60',// 图表的刻度分隔段数'splitNumber': 5,// 图表的轴线相关'axisLine': {'show': true,'lineStyle': {'color': [[0.9,new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: '#FFD900'},{offset: 1,color: '#FF8000'}])],[1, '#56606E']],'width': 15}},// 图表的刻度及样式'axisTick': {'lineStyle': {'color': '#0F1318','width': 2},'length': 15,'splitNumber': 1},// 图表的刻度标签(20、40、60等等)'axisLabel': {'distance': -8,'textStyle': {'color': '#9E9E9E'}},// 图表的分割线'splitLine': {'show': false},// 图表的指针'pointer': {'show': false},// 图表的数据详情'detail': {'formatter': function (params) {return '{title|' + '总体得分}' + '\n' + '{score|' + params + '}'},'offsetCenter': [0, 0],'rich': {'title': {'fontSize': 12,'color': '#9E9E9E','lineHeight': 30},'score': {'fontSize': 27,'color': '#fff'}}},// 图表的标题'title': {'offsetCenter': [0, '90%'],'color': '#fff','fontSize': 14},'data': [{'name': '完成','value': 31}]},{'name': '外层线','type': 'gauge','radius': '72%','startAngle': '240','endAngle': '-60','center': ['50%', '50%'],'axisLine': {'lineStyle': {'width': 1,'color': [[1, '#56606E']]}},'splitLine': {'length': -6,'lineStyle': {'opacity': 0}},'axisLabel': {'show': false},'axisTick': {'splitNumber': 1,'lineStyle': {'opacity': 0}},'detail': {'show': false},'pointer': {'show': false}}]}let tempVal = 0clearInterval(this.clockChartTimer)this.clockChartTimer = setInterval(() => {if (tempVal > this.myIvstrAbility) {clearInterval(this.clockChartTimer)// 最后转到最终数据的地方option.series[0].data[0].value = this.myIvstrAbilityoption.series[0].axisLine.lineStyle.color[0][0] = this.myIvstrAbility / 100// 使用刚指定的配置项和数据显示图表this.myChart.setOption(option)// 初始化渲染完成this.renderCompleted = truereturn}option.series[0].data[0].value = tempValoption.series[0].axisLine.lineStyle.color[0][0] = tempVal / 100// 使用刚指定的配置项和数据显示图表。this.myChart.setOption(option)tempVal++}, 20)// 此处监听浏览器的resize，重新渲染图表let that = thiswindow.addEventListener("resize", function () {clearTimeout(that.resizeTimer)that.resizeTimer = setTimeout(() => {myChart.resize()}, 500)})
}

Vue中使用echarts定制特殊的仪表盘相关推荐

简单介绍Vue使用echarts定制特殊的仪表盘
这篇文章主要为大家详细介绍了Vue使用echarts定制特殊的仪表盘,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了Vue使用echarts定制特殊 ...
vue中使用echarts绘制仪表盘
效果图目录一.安装echarts 1.控制台使用命令进行安装 2.在package.json中配置echarts 3.在main.js中引用二.vue中使用echarts 1.首先设置一个放置图 ...
echart高级使用_Vue:在Vue中使用echarts
前言公司的项目中需要对数据做可视化处理,高级点的D3.js目前还没接触到,因此选用了大众化的Echarts, 在vue的生态系统中已经有实现好的vue-echarts,但是使用现成的就意味着必须使用 ...
在vue中，Echarts雷达图中indicator的点击事件，不能改变data中的值的解决方法
在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的值的解决方法参考文章: (1)在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的 ...
Vue中使用echarts图表插件
一.安装echarts依赖 npm install echarts -S 或者使用淘宝的镜像 npm install -g cnpm --registry=https://registry.npm.t ...
vue中基于echarts和基于高德地图的两种地图下钻与上浮方式
** vue中基于echarts和基于高德地图的两种地图下钻与上浮方式 ** 基于echarts的地图下钻与上浮(浙江省为例) 第一步:在<template>中构建承载echarts的do ...
Vue中引入echarts的步骤，折线图、柱状图、饼图的常用配置项
vue中引入echarts 一.安装echarts 二.引入echarts 1.全局引入 2.局部引入三.vue中使用echarts 1.准备好函数 2.准备一个容器来放echarts 3.初始化容 ...
vue中使用echarts实现动态数据绑定、获取后端接口数据
之前几篇echarts的文章是实现了静态的柱状图.折线图.饼状图.地图,在项目中我们肯定是需要获取后端接口,将后端返回的数据显示在图表上,所以这次就记录一下如何实现echarts的动态数据绑定. 简单 ...
【Echarts】在Vue中使用Echarts
在Vue中使用Echarts 引入第三方库vue-echarts vue-echarts安装与使用 vue2中使用Echarts vue-echarts安装 vue2中使用Echarts vue3中使 ...

Vue中使用echarts定制特殊的仪表盘

实现的效果：(初始化以及浏览器resize的时候数字和弧形条均为递增动画)

HTML部分：

CSS部分：

JS部分：

Vue中使用echarts定制特殊的仪表盘相关推荐

最新文章

热门文章