echarts 仪表盘图展示百分比

效果图如下：

背景图一加，效果就好看多了

代码：

        let myChart = echarts.getInstanceByDom(document.getElementById('verificationChart'))if (myChart == null) {// 如果不存在，就进行初始化myChart = echarts.init(document.getElementById('verificationChart'))}const gaugeData = [{value: 74,name: '核查率',title: {offsetCenter: ['0%', '20%'],},detail: {valueAnimation: true,offsetCenter: ['0%', '-15%'],},},]let option = {series: [{type: 'gauge',radius: 162,startAngle: 90,endAngle: -270,pointer: {show: false,},progress: {show: true,// 多组数据时进度条是否重叠overlap: false,// width: 20,roundCap: true,clip: false,itemStyle: {borderWidth: 0,color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: '#009EF8', // 0% 处的颜色},{offset: 1,color: '#30FFFF', // 100% 处的颜色},],},},},axisLine: {// 是否显示仪表盘轴线show: false,lineStyle: {// 仪表盘轴线宽度也要设置,否则只设置进度条宽度就不生效width: 20,},},splitLine: {show: false,},axisTick: {show: false,},axisLabel: {show: false,},data: gaugeData,title: {fontSize: 26,color: '#fff',},detail: {fontSize: 56,color: '#fff',fontFamily: 'YouSheBiaoTiHei',formatter: '{value}%',},},],}myChart.setOption(option)window.addEventListener('resize', () => {myChart.resize()})

echarts 仪表盘图展示百分比相关推荐

echarts 使用仪表盘图展示百分比
echarts案例: 仪表盘图展示百分比样式在实际开发工作中,很多时候需要用到数据可视化,echarts是比较常用的数据可视化工具,下面分享一个echarts仪表盘图展示百分比样式的案例.效果图如下 ...
echarts折线图横轴标签间隔
Echarts折线图展示时,如果横轴是按分钟展示数据,并且要一次展示一小时数据,那么横轴上会有60个标签,这样会导致数据会重叠在一起,展示效果不理想,此时可以横轴标签的间隔,比如每5分钟展示一个横轴标 ...
echarts折线图断开
从后端拿到的数据需要用echarts直线图展示,从后端拿到的数据格式是这样的 {'Mon':150,'Tue':230,'Wed':224,'Thu':218,'Fri':135,'Sat':147, ...
layui做折线图_flask+layui+echarts实现前端动态图展示数据效果
效果图: 该效果主要实现一个table展示数据,并在下方生成一个折线图. 实现方式: 1.首先需要对表格进行一个数据加载,这里用到了layui的table.render,具体用法可以参考 https: ...
echarts堆叠柱状图中显示百分比，tooltip展示百分比和数量
一.需求 1.后端返回的是堆叠图的每个类型的数量组成的数组,需要计算出每一个横向柱状里每个类型占的百分比,然后显示 2.点击某个柱状时,弹窗tooltip里要展示这个柱状中每个类型的百分比和数量二. ...
echarts 折线图多条折线数据相同时展示的图形并没有重合
简单粗暴的使用echarts官网展示用例我讲series中的几个对象中的值都改成了相同的看到数值相同图表中却没有重合后面发现解决办法如下只需要将对象中的stack属性删除就可以了,不仅仅针对 ...
livecharts中仪表盘_Vue中使用Echarts仪表盘展示实时数据的实现
在vue中echarts仪表盘实时数据彩笔一枚,简单记录一下. 业务场景:通过websocket实时推送数据,将数据渲染到仪表盘中. 第一步: 基于准备好的dom,初始化echarts仪表盘实例. ...
java+web+股票图表_基于Echarts的股票K线图展示
一.概述这是一个简单的股票K线图展示,利用echarts第三方进行配置,用户可以进行放大缩小查看K线图,还可进行拖拽. 二.演示效果三.目录结构其中dist文件夹是echart插件,jquery ...
Echarts环形图使用和设置（内外大小、颜色、指示线、圆圈中心字展示）
Echarts环形图使用 1.官网找图 Echarts官网链接 2.使用首先要进行下载,打开cmd,输入 npm install echarts --save 如果显示报错,那么使用管理员身份运行c ...

echarts 仪表盘图展示百分比

echarts 仪表盘图展示百分比

背景图一加，效果就好看多了

echarts 仪表盘图展示百分比相关推荐

最新文章

热门文章