Echarts环形图使用和设置（内外大小、颜色、指示线、圆圈中心字展示）_echarts嵌套环形图外圈颜色

Echarts环形图使用

1、官网找图

Echarts官网链接

2、使用

首先要进行下载，打开cmd，输入

npm install echarts --save
1

如果显示报错，那么使用管理员身份运行cmd。

其次，html中建立盒子，存放这个图标，记住一定要为这个盒子设置长宽。

<div class="chart" id="main" :style="{width: '431px', height: '167px'}"></div>
1

注意：这里的盒子id为main，底下js代码中 var chartDom = document.getElementById(‘main’)，得到的id要和存放的盒子id相对应。

js中按照以下格式进行使用，其中的import根据需求会有不一样之处。

import * as echarts from 'echarts/core';
import {TooltipComponent, LegendComponent} from 'echarts/components';
import {PieChart} from 'echarts/charts';
import {LabelLayout} from 'echarts/features';
import {CanvasRenderer} from 'echarts/renderers';

echarts.use([
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout
]);

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "construction",
  mounted() {
    this.createChart();
  },
  methods: {
    createChart() {
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
      //此处放入官网复制粘贴的图表代码
      };

      option && myChart.setOption(option);
    }
  }

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

Echars环形图设置

这是我的目标图表

对于环形图的操作，全部存放在option中。
这里展示代码，在代码中标注位置。

   option = {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        color:['#051C38','#15C2D9'],//修改图表颜色
        //graphic控制环形中间出现字，其中有两个对象，就是两行字
        graphic: [{
          type: 'text',//控制内容为文本文字
          left: 'center',
          top: '59px',//调整距离盒子高处的位置
          style: {
            fill: '#F3DF04',//控制字体颜色
            text: '30%',//控制第一行字显示内容
            fontSize: '24px',
          }
        }, {
          type: 'text',
          left: 'center',
          top: '90px',
          z: 10,
          style: {
            text: '投资进度',
            font: 'Microsoft YaHei',
            fontSize: '14px',
            lineHeight: 15,
            fill: '#FFFFFF',
          }
        }],
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['60%', '90%'],//在此处控制环的大小，第一个数据为内环，第二个为外环
            avoidLabelOverlap: false,

            //在这就是控制提示线文字的代码
            label: {
              normal: {
                show: true,//开启提示线文字
                position: 'outer',//设置文字的所在的位置
                formatter: '{c}亿',//设置展示的内容
                borderWidth: 20,//大小设置
                borderRadius: 4,
                color: '#F3DF04',//文字颜色
                rich: {
                  //设置字体，c代表数据内容，b代表数据名称（这两个都可以在option中的data里面看到）
                  c: {
                    fontSize: 16,
                    lineHeight: 12,
                  }
                },
              }

            },
            emphasis: {
              label: {
                show: false,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            //设置提示线
            labelLine: {
              normal: {
                show: true,//开启提示线展示
                length: 30,//设置第一条提示线长度
                length2: 30,//设置第二条提示线长度
                lineStyle: {
                  color: 'white'
                }
              }
            },
            data: [
              {value: 700, name: '未完成投资'},
              {value: 300, name: '已完成投资'},
            ]
          }
        ]
      };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

以上就是全部内容，如果有错误之处，欢迎指正！