Echarts -- graphic 实现自定义图片/文字

1. graphic 组件相关配置参考：ECharts图形元素组件（graphic）_w3cschool

2. graphic 是与 series 同级别的对象，参考如下：

1.  
   series: [{
2.  
   // ......
3.  
   }],
4.  
   graphic: [{
5.  
   type: 'group',// 组（可以包含图形、文字、图片）
6.  
   left: 0,
7.  
   top: 'bottom',
8.  
   children: [{
9.  
   type: 'rect',
10.  
    z: 100,
11.  
    left: '0',
12.  
    top: '0',
13.  
    shape: {
14.  
    width: 180,
15.  
    height: 100
16.  
    },
17.  
    style: {
18.  
    fill: '#f6f6f6',
19.  
    }
20.  
    },
21.  
    {
22.  
    type: 'image',// 图片
23.  
    left:10,
24.  
    top: 10,
25.  
    z: 100,
26.  
    bounding: 'raw',
27.  
    style: {
28.  
    image: '/static/UserSys/product/cadre/Report/img/country.png',
29.  
    width: 20,
30.  
    height: 20,
31.  
    }
32.  
    },
33.  
    {
34.  
    type: 'text',// 文字
35.  
    z: 100,
36.  
    left: 45,
37.  
    top: 13,
38.  
    style: {
39.  
    fill: '#e46c11',
40.  
    text: '全球分布 ' countryCounts ' 国',
41.  
    font: '14px Microsoft YaHei'
42.  
    }
43.  
    },
44.  
    {
45.  
    type: 'image',
46.  
    left:10,
47.  
    top: 40,
48.  
    z: 100,
49.  
    bounding: 'raw',
50.  
    style: {
51.  
    image: '/static/UserSys/product/cadre/Report/img/china.png',
52.  
    width: 20,
53.  
    height: 20,
54.  
    }
55.  
    },
56.  
    {
57.  
    type: 'text',
58.  
    z: 100,
59.  
    left: 45,
60.  
    top: 43,
61.  
    style: {
62.  
    fill: '#e46c11',
63.  
    text: '中籍员工 ' chinaNaticeCount ' 人',
64.  
    font: '14px Microsoft YaHei'
65.  
    }
66.  
    },
67.  
    {
68.  
    type: 'image',
69.  
    left:10,
70.  
    top: 70,
71.  
    z: 100,
72.  
    bounding: 'raw',
73.  
    style: {
74.  
    image: '/static/UserSys/product/cadre/Report/img/global.png',
75.  
    width: 20,
76.  
    height: 20,
77.  
    }
78.  
    },
79.  
    {
80.  
    type: 'text',
81.  
    z: 100,
82.  
    left: 45,
83.  
    top: 73,
84.  
    style: {
85.  
    fill: '#e46c11',
86.  
    text: '外籍员工 ' foreignNativeCount ' 人',
87.  
    font: '14px Microsoft YaHei'
88.  
    }
89.  
    },
90.  
    ]
91.  
    }]

这篇好文章是转载于：学新通技术网