Echarts仪表盘之 option配置

先看效果：

 再上代码：

option = {
                series: [
                    {
                        type: 'gauge',
                        //进度轴：即加载数据的线条
                        progress: {
                            show: true,
                            width: 8,
                            itemStyle: {
                                // x 左下角 y 左上角 x2右下角  y2右上角 。我想让它从左往右变色，则应该是x -> x2
                                color: {
                                    x: 0,
                                    y: 0,
                                    x2: 1,
                                    y2: 0,
                                    //颜色坐标是反着来的
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: '#41d1f2' // 0% 处的颜色
                                        },
                                        {
                                            offset: 0.3,
                                            color: '#41d1f2' // 30% 处的颜色
                                        },
                                        {
                                            offset: 0.6,
                                            color: '#219fb1' // 60% 处的颜色
                                        },

                                        {
                                            offset: 1,
                                            color: '#0cbc81' // 100% 处的颜色
                                        }
                                    ],
                                    global: false // 缺省为 false
                                }
                            }
                        },
                        // 底轴:即底下全部的线条
                        axisLine: {
                            lineStyle: {
                                width: 8,
                                color: [
                                    [0, '#1f6ca4'], // 开始的颜色 取值0~1
                                    [1, '#226fa5'] // 结尾的颜色 取值0~1
                                ]
                            }
                        },
                        // 刻度线
                        axisTick: {
                            show: true,
                            splitNumber: 5, //分割线之间的刻度数
                            distance: 1, //刻度线与轴线(外圈柱子)的距离 越小离得越近
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        // 刻度分割
                        splitNumber: 4, //值为 100 / 4
                        //大的分割线
                        splitLine: {
                            show: false,
                            length: 8,
                            lineStyle: {
                                width: 2,
                                color: '#fff'
                            }
                        },
                        // 刻度线的文字
                        axisLabel: {
                            distance: 3,
                            color: '#fff',
                            fontSize: 16
                        },
                        //圆心点
                        anchor: {
                            show: true,
                            showAbove: true,
                            size: 8, //与borderWidth保持一致，即可取消中间的小孔
                            itemStyle: {
                                borderWidth: 8,
                                color: '#fff', // 圆心的颜色
                                borderColor: '#42b6ef' //圆边框的颜色
                            }
                        },
                        // 仪表盘指针
                        pointer: {
                            width: 4,
                            length: '70%',
                            itemStyle: {
                                color: '#42b6ef'
                            }
                        },
                        // 仪表盘下方显示的文字
                        detail: {
                            valueAnimation: true, // 是否开启中间标签的数字动画
                            fontSize: 22,
                            color: '#2ad9ff',
                            offsetCenter: [0, '110%'], //中间数字距离中心点的距离 越大越远
                            formatter: this.value
                        },
                        title: {
                            show: false // 默认为true 显示标题
                        },
                        //数据
                        data: [
                            {
                                value: this.value || 0.1
                            }
                        ]
                    }
                ]
            };

顺带一提echarts图表在vue中的使用方法：

1.下载echarts包文件

npm install echarts -S

提示： -S表示项目打包上线的时候该包也会存在  -D表示该包文件只在开发时用

2.main.js中导入echarts ， 并挂载到全局

import * as echarts from 'echarts';
window.echarts = echarts;

提示：这里我是挂载到window上,其实挂到vue原型上也可以

挂载到vue原型：

Vue.prototype.$echarts = echarts

3.在项目文件(.vue)中导入echarts

<script>
let echarts = require('echarts');
export default {
    ……
}
</script>

4.给容器盒子设置宽高

<template>
    <div
        class="echart"
        ref="dashBoard"
        style="width: 200px; height: 200px"
    ></div>
</template>

5.初始化盒子，以及挂载option到盒子上

    mounted() {
        this.initChart();
    }, 
    methods:{
        initChart(){
          let myChart = echarts.init(this.$refs.dashBoard);
          let option = {……}
          myChart.setOption(option);  
        } 
    }