总结一下使用 echarts中常用的配置

饼图

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
option = {
  tooltip: {
    trigger: 'item'
  },
   // 第2处 修改图例相关设置
  legend: {
    orient: 'vertical', //将图例 改为横向
    x: '80px', //微操图例位置
    y: '80px',
    left: 'left', //修改图例显示位置
    textStyle: {
      color: 'red' //修改图例文字样式
    }
  },
    // 第5处 修改饼图相关配置
  graphic: {
    type: 'text',
    left: 'center',
    top: '50%', // 将描述信息置于饼图中央
    style: { // 文字样式
      text: '养老护理员',
      textAlign: 'center',
      fill: 'red',
      fontSize: 20,
      fontWeight: 700
    }
  },
    // 第1处 修改标题相关配置
  title: {
    text: '服务人员从业年限',
    textStyle: { // 修改标题文字样式
      color: 'red'
    },
    left: '50%', //微操标题位置
    top: '4%'
  },
  series: [
    {
      type: 'pie',
        
        // 第3处 修改饼图的 粗细和中心圆半径
      radius: ['20%', '50%'],
        
        
        // 开启此配置，当鼠标悬浮饼图中时，将相关信息显示至饼图中央
      // label: {
      //   show: true,
      //   position: 'center',
      //  textStyle: {
      //    color: 'red'
      //  }
      // },
        
        // 开启此配置， 当鼠标悬浮饼图中时，着重显示相关信息
      // emphasis: {
      //   label: {
      //     show: true,
      //     fontSize: '40',
      //     fontWeight: 'bold'
      //   }
      // },
        
        // 第4处 是否显示线条
      labelLine: {
        show: true
      },
      data: [
        { value: 348, name: '1年以下' },
        { value: 132, name: '1-2年' },
        { value: 132, name: '2-3年' },
        { value: 100, name: '3-4年' },
        { value: 348, name: '4-5年' },
        { value: 700, name: '5年以上' }
      ]
    }
  ]
};

折线图

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
option = {
  title: {
    text: 'xx学校招生情况',
    textStyle: {
      color: 'red',
      fontSize: 27
    } // 第一处 标题及字体样式
  },
  grid: {
    top: '30%' // 第二处 标题距离图标的距离
  },
  tooltip: {
    trigger: 'axis'  // 第五处 提示框样式
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      show: true,
      textStyle: {
        color: 'red' // 第四处 字体样式 x轴同理
      }
    },
    name: '人数', 
    nameTextStyle: {
      color: 'red' // 第三处 y轴标注及字体样式 x轴同理
    }
  },
  xAxis: {
    type: 'category',
    name: '年份', 
    nameTextStyle: {
      color: 'red'
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: 'red'
      }
    },
    data: [
      '2010年',
      '2011年',
      '2012年',
      '2013年',
      '2014年',
      '2015年',
      '2016年',
      '2018年',
      '2019年',
      '2020年',
      '2021年',
    ]
  },
  
  series: [
    {
      data: [1150, 1160, 1166, 1170, 1180, 1483, 1585, 1990, 1999, 2200,2210],
      type: 'line'
    }
  ]
};