echarts案例：仪表盘图展示百分比样式

在实际开发工作中，很多时候需要用到数据可视化，echarts是比较常用的数据可视化工具，下面分享一个echarts仪表盘图展示百分比样式的案例。效果图如下：

步骤如下：

1.下载并引入echarts

npm install echarts --save

在需要的使用echarts的js文件中引入

import echarts from 'echarts'

2.获取dom元素，创建option

let ginsengGauge = echarts.init(document.getElementById('ginsengGauge'))
let option ={tooltip: {formatter: '{a} <br/>{b} : {c}%'},series: [{type: 'gauge',  //类型：仪表盘图name: '制造业', title: {offsetCenter: [0, '120%'],  //系列标题文字（效果图中的“制造业”）的位置，第一个为横坐标，第二个为纵坐标color: "#fff",  //字体颜色fontSize: 16,},center: ['15%', '45%'],   //仪表盘图的中心点相对于dom容器的位置detail: {  //设置效果图中文字“30.25%”的相关配置formatter: '{value}%',offsetCenter: [0, 0],color: "#FFF",fontSize: 18},data: [{value: 30.25, //此处要改数据name: '制造业'}],radius: '50%',  //环形的大小clockwise: true,axisLine: {show: true,lineStyle: {color: [[0.3025, '#1A8FC5'], //占总数的30.25%，即value/100，颜色为'#1A8FC5'[1, '#E1E8EE']  //基底大圈比例为1，颜色为'#E1E8EE'，],width: 10,  //环形的粗细}},splitLine: {show: false   //不显示分隔线},axisTick: {show: false  //不显示仪表盘刻度},axisLabel: {show: false},pointer: {show: false  //不显示仪表盘指针},},]
}

欢迎访问个人博客歌洞章

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

echarts 仪表盘图展示百分比
echarts 仪表盘图展示百分比效果图如下: 背景图一加,效果就好看多了代码: let myChart = echarts.getInstanceByDom(document.getElemen ...
[vue+elementUI+echarts]echart折线图展示后台传来的数据
最近项目遇到了这个问题,来记录一下,方便以后复制粘贴23333 主要功能: 循环遍历渲染后台传来的一堆数据,然后点击每一条数据的More Info按钮展示对应的折线图表格数据. 引elementUi和 ...
layui做折线图_flask+layui+echarts实现前端动态图展示数据效果
效果图: 该效果主要实现一个table展示数据,并在下方生成一个折线图. 实现方式: 1.首先需要对表格进行一个数据加载,这里用到了layui的table.render,具体用法可以参考 https: ...
ECharts饼状图lable显示Value所占百分比
ECharts饼状图lable显示Value所占百分比以及legend显示Value所占百分比简单的实现可以参考: export default {data() {return {}},mounte ...
Echarts实现折线图Y轴不等距百分比（最终解决方案）
Echarts实现折线图Y轴不等距百分比(最终解决方案-上集) 出现背景解决思路总结附加出现背景最近公司有一个需求,主要是想展示近7日产品的一个良品率(百分率制).但是呢,基本上每天这个 ...
java+web+股票图表_基于Echarts的股票K线图展示
一.概述这是一个简单的股票K线图展示,利用echarts第三方进行配置,用户可以进行放大缩小查看K线图,还可进行拖拽. 二.演示效果三.目录结构其中dist文件夹是echart插件,jquery ...
echarts 自适应屏幕主题颜色自动缩放选框多图展示自定义toolTip
图自适应屏幕 /*** 自适应*/ window.addEventListener("resize",function () {myChart.resize(option) }) ...
【ECharts】环形图、饼状图
目录 color设置的颜色环形渐变色圆环中间显示文字悬浮显示中间文字悬浮显示中间文字,默认显示第一个循环高亮饼图块 label文字过长重叠 label和饼图一致 label展示位置内容为0 ...
Echarts饼图之数据展示
Echarts饼图之数据展示 1.组件简介 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,C ...

echarts 使用仪表盘图展示百分比

echarts案例：仪表盘图展示百分比样式

步骤如下：

1.下载并引入echarts

2.获取dom元素，创建option

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

最新文章

热门文章

echarts 使用仪表盘图展示百分比

echarts案例： 仪表盘图展示百分比样式

步骤如下：

1.下载并引入echarts

2.获取dom元素，创建option

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

最新文章

热门文章

echarts案例：仪表盘图展示百分比样式