更新记录

1.0.3（2024-03-19）

更新说明文档【readme.md】

1.0.2（2024-03-19）

更新说明文档【readme.md】

1.0.1（2024-03-19）

更新使用文档【readme.md】

查看更多

平台兼容性

Vue2 Vue3
√ ×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 × √ × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

my-echarts 基于百度echarts开发组件

作者有话要说：在微信小程序中，使用饼图、柱状图、折线图、雷达图、K线图、仪表盘等等的可视化图表一直都是痛点，况且在大数据和可视化横行的时代，有一个权威的、开源的、丰富的可视化图表库是大家迫切需要的，今天就教大家如何使用uniapp或vue来集成百度的echarts

echarts：一个基于 JavaScript 的开源可视化图表库 本组件是仪表盘 组件中使用echarts版本：5.4.3 echarts文件自行去官网打包下载

思路：3个仪表盘重叠

组件使用方法：

<my-echarts class="my-echarts" id="my-echarts" ref="my-echarts" canvas-id="my-echarts"
    :ec="initEcharts(Score)"></my-echarts>

API调用方法：

initEcharts(score) {
    return this.echartOption = {
        option: {
            series: [{
                    type: 'gauge',
                    animation: false,
                    min: 0, //最大值
                    max: 100, //最小值
                    startAngle: 220, //仪表盘起始角度。正右手侧为0度，正上方为90度，正左手侧为180度。
                    endAngle: -40, //仪表盘结束角度
                    radius: '85%',
                    splitNumber: 1, //仪表盘刻度的分割段数
                    progress: {
                        show: true, //是否显示进度条
                        roundCap: false, //是否在两端显示成圆形
                        width: 1, //进度条宽度
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0.8,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                        offset: 0,
                                        color: '#901dd0' // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: '#2E96F5' // 100% 处的颜色
                                    }
                                ],
                                global: false
                            },
                        },
                    },
                    pointer: {
                        show: false, //是否显示指针
                    },
                    axisLine: {
                        show: false, //是否显示仪表盘轴线
                    },
                    axisTick: {
                        show: false, //是否显示刻度
                    },
                    splitLine: {
                        show: false, //是否显示分隔线
                    },
                    axisLabel: {
                        show: false, //是否显示标签
                    },
                    title: {
                        show: false, //是否显示标题
                    },
                    detail: {
                        show: false
                    },
                    data: [{
                        value: 100,
                        name: ''
                    }]
                },
                {
                    type: 'gauge',
                    min: 0, //最大值
                    max: 100, //最小值
                    startAngle: 220, //仪表盘起始角度。正右手侧为0度，正上方为90度，正左手侧为180度。
                    endAngle: -40, //仪表盘结束角度
                    splitNumber: 1, //仪表盘刻度的分割段数
                    progress: {
                        show: true, //是否显示进度条
                        roundCap: false, //是否在两端显示成圆形
                        width: 14, //进度条宽度
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0.8,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                        offset: 0,
                                        color: '#901dd0' // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: '#2E96F5' // 100% 处的颜色
                                    }
                                ],
                                global: false
                            },
                        },
                    },
                    pointer: {
                        show: true, //是否显示指针
                        width: 10,
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 1,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                        offset: 0,
                                        color: '#901dd0' // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: '#388CFF' // 100% 处的颜色
                                    }
                                ],
                                global: false // 缺省为 false
                            }
                        },
                    },
                    axisLine: {
                        show: true, //是否显示仪表盘轴线
                        roundCap: false, //是否在两端显示成圆形
                        lineStyle: {
                            width: 14, //轴线宽度
                        }
                    },
                    axisTick: {
                        show: false, //是否显示刻度
                        distance: -29,
                        itemStyle: {
                            color: '#fff',
                            width: 2
                        }
                    },
                    splitLine: {
                        show: false, //是否显示分隔线
                        distance: -30
                    },
                    axisLabel: {
                        show: true, //是否显示标签
                        distance: -10,
                        fontSize: 16,
                        color: '#368EF3'
                    },
                    title: {
                        show: false, //是否显示标题
                        fontSize: 20
                    },
                    detail: {
                        valueAnimation: true,
                        fontSize: 20,
                        color: '#368EF3',
                        offsetCenter: [0, '65%']
                    },
                    data: [{
                        value: score,
                        name: '仪表盘'
                    }]
                },
                {
                    type: 'gauge',
                    animation: false,
                    min: 0, //最大值
                    max: 100, //最小值
                    startAngle: 220, //仪表盘起始角度。正右手侧为0度，正上方为90度，正左手侧为180度。
                    endAngle: -40, //仪表盘结束角度
                    radius: '55%',
                    splitNumber: 1, //仪表盘刻度的分割段数
                    progress: {
                        show: true, //是否显示进度条
                        roundCap: false, //是否在两端显示成圆形
                        width: 1, //进度条宽度
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0.8,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                        offset: 0,
                                        color: '#901dd0' // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: '#2E96F5' // 100% 处的颜色
                                    }
                                ],
                                global: false
                            },
                        },
                    },
                    pointer: {
                        show: false, //是否显示指针
                    },
                    axisLine: {
                        show: false, //是否显示仪表盘轴线
                    },
                    axisTick: {
                        show: false, //是否显示刻度
                    },
                    splitLine: {
                        show: false, //是否显示分隔线
                    },
                    axisLabel: {
                        show: false, //是否显示标签
                    },
                    title: {
                        show: false, //是否显示标题
                    },
                    detail: {
                        show: false
                    },
                    data: [{
                        value: 100,
                        name: ''
                    }]
                }
            ]
        },
    }
}

API说明文档（具体详细可以去官网查找【配置项手册】）：

其他配置可以去echarts官网查找【配置项手册】

属性 必填 类型 说明
type 是 String 仪表盘：gauge
animation 是 Boolean 否开启动画
min 是 Number 分数范围最小值
max 是 Number 分数范围最大值
startAngle 是 Number 仪表盘起始角度。正右手侧为0度，正上方为90度，正左手侧为180度。
endAngle 是 Number 仪表盘结束角度
radius 是 String 极坐标系的半径
splitNumber 是 Number 仪表盘刻度的分割段数
progress 否 Object 样式
pointer 否 Object 仪表盘指针
axisLine 否 Object 坐标轴轴线相关设置
axisTick 否 Object 坐标轴刻度相关设置
splitLine 否 Object 坐标轴在 grid 区域中的分隔线
axisLabel 否 Object 坐标轴刻度标签的相关设置
title 否 Object 标题组件
detail 否 Object 仪表盘详情，用于显示数据
data 否 Array 图例的数据数组

progress 样式介绍

属性 必填 类型 说明
show 是 Boolean 是否显示进度条
roundCap 是 Boolean 是否在两端显示成圆形
width 是 Number 进度条宽度
itemStyle 否 Object 图例的图形样式

itemStyle 图例的图形样式介绍

属性 必填 类型 说明
color 否 Object 图形的颜色（支持渐变）
borderColor 否 Object 图形的描边颜色。支持的颜色格式同 color（见echarts官方配置项手册）
shadowBlur 否 Object 图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
shadowOffsetX 否 Number 阴影水平方向上的偏移距离
shadowOffsetY 否 Number 阴影垂直方向上的偏移距离
opacity 否 Number 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形

color 图形的颜色（支持渐变）介绍

属性 必填 类型 说明
type 否 String linear：线性渐变，radial：径向渐变
x 否 Number x,y,x2,y2范围从 0 - 1，相当于在图形包围盒中的百分比（如果 global 为 true，则该四个值是绝对的像素位置）
y 否 Number 同上
x2 否 Number 同上
y2 否 Number 同上
colorStops 否 Object 设置渐变颜色
global 否 Boolean 如果 global 为 true，则该四个值是绝对的像素位置

colorStops 设置渐变颜色

属性 必填 类型 说明
offset 否 Number 渐变方式：从0->100%，颜色蓝色->红色
color 否 String 颜色：RGBA/十六进制

pointer 仪表盘指针介绍

属性 必填 类型 说明
show 否 Boolean 是否显示指针
showAbove 否 Boolean 指针是否显示在标题和仪表盘详情上方
offsetCenter 否 Array 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。（见echarts官方配置项手册）
length 否 String/Number 指针长度，可以是绝对数值，也可以是相对于半径的半分比
width 否 Number 指针宽度
itemStyle 否 Object 图例的图形样式

axisLine 坐标轴轴线相关设置

属性 必填 类型 说明
show 否 Boolean 是否显示仪表盘轴线
symbol 否 String/Array 轴线两边的箭头
roundCap 否 Boolean 是否在两端显示成圆形
lineStyle 否 Object 轴线样式

lineStyle 轴线样式

属性 必填 类型 说明
width 否 Number 轴线宽度

axisTick 坐标轴刻度相关设置

属性 必填 类型 说明
show 否 Boolean 是否显示坐标轴刻度
inside 否 Boolean 坐标轴刻度是否朝内，默认朝外
length 否 Boolean 坐标轴刻度的长度
distance 否 Number 距离图形元素的距离

splitLine 坐标轴在 grid 区域中的分隔线介绍

属性 必填 类型 说明
show 否 Boolean 是否显示分隔线
distance 否 Number 距离图形元素的距离

axisLabel 坐标轴刻度标签的相关设置

属性 必填 类型 说明
show 否 Boolean 是否显示标签
distance 否 Number 距离图形元素的距离
fontSize 否 Number 字体大小
color 否 String 颜色：RGBA/十六进制

title 标题组件

属性 必填 类型 说明
show 否 Boolean 是否显示标题组件
fontSize 否 Number 字体大小

detail 仪表盘详情，用于显示数据

属性 必填 类型 说明
show 否 Boolean 是否显示详情
valueAnimation 否 Boolean 是否开启标签的数字动画
fontSize 否 Number 字体大小
color 否 String 颜色：RGBA/十六进制
offsetCenter 否 Array 相对于仪表盘中心的偏移位置

data 图例的数据数组

属性 必填 类型 说明
value 否 Number 数值
name 否 String 图例项的名称

看到这里你学会了吗？ 如果对你有所帮助的话，请给我一个五星好评吧？

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论
加载更多...
插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...