echarts实现刻度盘

需求：产品要求制作一个刻度圆环，并存在点击事件

思路：使用echarts中的圆环和仪表盘叠加，并为chart添加点击效果

代码展示：

<script>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
let color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF']
let echartData = [{name: 'A',value: '3720'},{name: 'B',value: '2920'},{name: 'C',value: '2200'},{name: 'D',value: '1420'},{name: 'E',value: '1820'}
]
let option: any
let chart: any
const refChart = ref<HTMLElement | undefined>(undefined)const initChart = () => {option = {color: color,title: false,series: [{type: 'gauge',radius: '70%',startAngle: '0',endAngle: '-359.99',splitNumber: '30',pointer: {show: false},title: {show: false},detail: {show: false},axisLine: {lineStyle: {width: 20,opacity: 0}},axisTick: {show: false},splitLine: {show: true,length: 48,lineStyle: {color: '#082b4b',width: 3,type: 'solid'}},axisLabel: {show: false},zlevel: 1},{type: 'pie',radius: ['45%', '60%'],center: ['50%', '50%'],data: echartData,hoverAnimation: false,label: false}]}chart.setOption(option)
}
const clickDialog = (params: any) => {console.log('获取到了', params.data.name)
}onMounted(() => {chart = echarts.init(refChart.value!)chart.on('click', clickDialog)initChart()
})
</script>
<template><div class="chart" ref="refChart"></div>
</template>
<style lang="less" scoped>
@import '@/styles/mixin.less';
.chart {width: 600px;height: 600px;
}
</style>

成品展示：

echarts实现刻度盘相关推荐

Vue + Echarts(v5.版本)的简单组件封装（折线图、柱状图、散点图、饼/环形图、仪表盘、雷达图）
项目中展示图表的地方很多,不想每次都写一长串的 options配置,就整合了一下常用的配置项,简单封装了一下,也能保证整个系统的图表风格统一,需要调整样式的时候也不用改很多地方 2022-11-07: ...
echarts 仪表盘文本下移_echarts仪表盘设置图文实例
echarts 图表中经常需要对不同的颜色设置图例标识不同的意义,而仪表盘的指针只存在一个值,如何表示不同颜色的意义,官网配置项并未给出该功能: 不同段的颜色是通过axisLine->lineS ...
echarts数据变了不重新渲染，以及重新渲染了前后数据会重叠渲染的问题
1.echarts数据变了但是视图不重新渲染新建Chart.vue文件 <template> <p :id="id" :style="style&q ...
r语言echarts画箱线图_echarts学习笔记之箱线图的分析与绘制详解
一.箱线图 box-plot 箱线图(boxplot)也称箱须图(box-whisker plot),它是用一组数据中的最小值.第一四分位数.中位数.第三四分位数和最大值来反映数据分布的中心位置和散布 ...
echarts x轴文字个数太多_echarts x轴标签文字过多导致显示不全，最有效的3种解决方法...
echarts x轴标签文字过多导致显示不全,只是我之前在csdn发表过,经过实践,效果不错! 如图: 办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用 ...
获取this_小程序获取微信运动步数并集成echarts报表显示
需求现在运动计步非常的火,大家常用的计步工具一般有keep.咕咚.微信运动和其他移动设备等,本文是基于微信小程序获取用户的微信运动数据并可视化呈现出来. 先看一下最终实现效果: 微信运动规则在开发 ...
echarts切换折线图变大_这个月，我就和折线图杠上了...
作者 hustcc 蚂蚁金服·数据体验技术团队 TL;DR G2Plot 是一个注重于细节体验的通用统计图表库. 背景折线图用于表示连续时间跨度内的数据,它通常用于显示某变量随时间的变化模式:是上升 ...
Echarts读取本地json文件渲染轨迹，亲测ok
Echarts读取本地json文件渲染轨迹,亲测ok 1. 报错及解决 2. 效果图 3. 源码lines-track.html如下参考 1. 报错及解决报错:由于浏览器的同源策略已拦截跨源请求 ...
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
grid: {show: false,left: '0px',top: '50px',right: '1px',bottom: '0px',containLabel: true,backgroundC ...
echarts 横纵分割线颜色透明度
/*横纵分割线颜色透明度*/ xAxis: {axisLabel: {textStyle: {color: "#2484db"}},axisLine: {lineStyle: {c ...

echarts实现刻度盘

echarts实现刻度盘相关推荐

最新文章

热门文章