Echarts学习笔记

# 饼图

查看代码详情 
<template>
  <div ref="pie" style="height: 100%"></div>
</template>
  
  <script>
const labelRight = {
  position: "right",
};
export default {
  name: "WebPie",
  props: {
    config: {
      type: Function,
    },
    data: {
      type: [Array, Object],
      default: () => [],
    },
    styles: {
      type: String,
      default: "height: 100%;width:800px;",
    },
    title: {
      type: [Array, Object],
      default: () => [
        {
          text: "统计数据",
          subtext: "单位：个",
        },
      ],
    },
    tooltip: {
      type: [Array, Object],
      default: () => [
        {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
      ],
    },
    grid: {
      type: [Array, Object],
      default: () => [
        {
          top: "250",
          bottom: 30,
        },
      ],
    },
    legend: {
      type: [Array, Object],
      default: () => [
        {
          orient: "vertical",
          left: "0%",
          top: "0%",
          bottom: "center",
          data: ["<10w", "10w-50w", "50w-100w", "100w-500w", ">500w"],
        },
      ],
    },
    xAxis: {
      type: [Array, Object],
      default: () => [
        {
          show: false,
        },
      ],
    },
    yAxis: {
      type: [Array, Object],
      default: () => [
        {
          show: false,
        },
      ],
    },
    series: {
      type: [Array, Object],
      default: () => [
        {
          type: "pie",
          radius: ["58%", "68%"],
        },
      ],
    },
  },
  data() {
    return {
      option: {
        title: this.titleTransform(this.title),
        tooltip: this.tooltip,
        grid: this.grid,
        legend: this.legend,
        series: this.series,
      },
      charts: null,
    };
  },
  methods: {
    titleTransform({ text, subtext, ...others }) {
      let arr = [];
      let target = {};
      if (text) {
        target = {
          text: "{style1|}{style2|}{style3|}" + text,
          textStyle: {
            fontWeight: "800",
            color: "#333",
            fontSize: 18,
            rich: {
              style1: {
                height: 20,
                width: 4,
                backgroundColor: "#2d65f2",
              },
              style2: {
                height: 20,
                width: 4,
                backgroundColor: "#b2c2ff",
              },
              style3: {
                width: 10,
              },
            },
          },
          left: 0,
          top: 0,
          ...others,
        };
        arr.push(target);
      }
      if (subtext) {
        target = {
          subtext: "{style1|}" + subtext,
          subtextStyle: {
            align: "right",
            verticalAlign: "top",
            color: "#666",
            fontSize: "18",
            rich: {
              style1: {},
            },
          },
          right: 0,
          top: -10,
          ...others,
        };
      }
      arr.push(target);
      return arr;
    },
  },
  mounted() {
    this.charts = this.$echarts.init(this.$refs.pie);
    if (!this.config) {
      this.charts.setOption(this.option);
    }
  },
  watch: {
    data: {
      handler(val) {
        let { title, ...option } = this.config(val);
        this.charts.setOption({
          title: title ? this.titleTransform(title) : [],
          ...option,
        });
      },
      deep: true,
    },
  },
};
</script>
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174

遇到的难点

  • 问题 1:圆环带背景圆环

# 1.多个饼图

  • 饼图背景

查看代码详情 
<template>
  <WebPie :config="getOptions" :data="data"></WebPie>
</template>

<script>
export default {
  data() {
    return {
      data: [],
    };
  },
  async created() {
    let res = await this.$api.getPie(1);
    if (res.data) {
      this.data = res.data.map((item) => ({ ...item, value: item.descript }));
    }
  },
  methods: {
    getOptions(data) {
      return {
        title: {
          text: "多个饼图",
          subtext: "单位：元",
        },
        legend: {
          orient: "vertical",
          right: "20%",
          top: "20%",
          bottom: "center",
          data: data.map((i) => i.name),
        },
        series: [
          {
            name: "背景图",
            type: "pie",
            radius: ["25%", "68%"],
            color: "#d9e1f5",
            silent: true,
            itemStyle: {
              color: "#d9e1f5",
              shadowOffsetX: -2,
              shadowOffsetY: -2,
              shadowBlur: 6,
              shadowColor: "rgba(0,0,0,0.16)",
            },
            data: [{ value: 0, label: { show: false } }],
          },
          {
            name: "数据图",
            type: "pie",
            radius: ["25%", "58%"],
            label: {
              position: "inner",
              formatter: "{d}%",
              textStyle: {
                color: "#fff",
                fontWeight: "bold",
                fontSize: 14,
              },
            },
            data: data,
          },
        ],
      };
    },
  },
};
</script>
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

# 2.多个饼图

  • 饼图 + 圆环

查看代码详情 
<template>
  <WebPie :config="getOptions" :data="data"></WebPie>
</template>

<script>
export default {
  data() {
    return {
      data: [],
    };
  },
  async created() {
    let res = await this.$api.getPie(2);
    if (res.data) {
      this.data = res.data.map((item) => ({ ...item, value: item.descript }));
    }
  },
  methods: {
    getOptions(data) {
      return {
        title: {
          text: "多个饼图",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          x: "left",
          y: "center",
          data: [
            "直达",
            "营销广告",
            "搜索引擎",
            "邮件营销",
            "联盟广告",
            "视频广告",
            "百度",
            "谷歌",
            "必应",
            "其他",
          ],
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            selectedMode: "single",
            radius: [0, "30%"],

            label: {
              normal: {
                position: "inner",
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [
              { value: 335, name: "直达", selected: true },
              { value: 679, name: "营销广告" },
              { value: 1548, name: "搜索引擎" },
            ],
          },
          {
            name: "访问来源",
            type: "pie",
            radius: ["40%", "55%"],
            data,
          },
        ],
      };
    },
  },
};
</script>
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

# 3.多个饼图

  • 圆环

查看代码详情 
<template>
  <WebPie v-bind="option"></WebPie>
</template>

<script>
var dataStyle = {
  normal: {
    label: { show: false },
    labelLine: { show: false },
    shadowBlur: 40,
    shadowColor: "rgba(40, 40, 40, 0.5)",
  },
};
var placeHolderStyle = {
  normal: {
    color: "rgba(0,0,0,0)",
    label: { show: false },
    labelLine: { show: false },
  },
  emphasis: {
    color: "rgba(0,0,0,0)",
  },
};
export default {
  data() {
    return {
      option: {
        color: ["#85b6b2", "#6d4f8d", "#cd5e7e", "#e38980", "#f7db88"],
        tooltip: {
          show: true,
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          itemGap: 12,
          top: "87%",
          data: ["01", "02", "03", "04", "05", "06"],
        },
        series: [
          {
            name: "Line 1",
            type: "pie",
            clockWise: false,
            radius: [180, 200],
            itemStyle: dataStyle,
            hoverAnimation: false,
            data: [
              {
                value: 300,
                name: "01",
              },
              {
                value: 50,
                name: "invisible",
                itemStyle: placeHolderStyle,
              },
            ],
          },
          {
            name: "Line 2",
            type: "pie",
            clockWise: false,
            radius: [160, 180],
            itemStyle: dataStyle,
            hoverAnimation: false,
            data: [
              {
                value: 150,
                name: "02",
              },
              {
                value: 60,
                name: "invisible",
                itemStyle: placeHolderStyle,
              },
            ],
          },
          {
            name: "Line 3",
            type: "pie",
            clockWise: false,
            hoverAnimation: false,
            radius: [140, 160],
            itemStyle: dataStyle,
            data: [
              {
                value: 80,
                name: "03",
              },
              {
                value: 50,
                name: "invisible",
                itemStyle: placeHolderStyle,
              },
            ],
          },
          {
            name: "Line 4",
            type: "pie",
            clockWise: false,
            hoverAnimation: false,
            radius: [120, 140],
            itemStyle: dataStyle,
            data: [
              {
                value: 45,
                name: "04",
              },
              {
                value: 30,
                name: "invisible",
                itemStyle: placeHolderStyle,
              },
            ],
          },
        ],
      },
    };
  },
};
</script>
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120

# 4.单个饼图

查看代码详情 
<template>
  <WebPie :config="getOptions" :data="data"></WebPie>
</template>

<script>
export default {
  data() {
    return {
      data: [],
    };
  },
  async created() {
    let res = await this.$api.getPie(1);
    if (res.data) {
      this.data = res.data.map((item) => ({ ...item, value: item.descript }));
    }
  },
  methods: {
    getOptions(data) {
      return {
        title: {
          text: "单个饼图",
        },
        backgroundColor: "#ffffff",
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        color: ["#8fc31f", "#f35833", "#00ccff", "#ffcc00"],
        legend: {
          orient: "vertical",
          x: "right",
          data: ["准时", "迟到", "请假", "未到"],
          formatter: function (name) {
            var oa = option.series[0].data;
            var num = oa[0].value + oa[1].value + oa[2].value + oa[3].value;
            for (var i = 0; i < option.series[0].data.length; i++) {
              if (name == oa[i].name) {
                return (
                  name +
                  "     " +
                  oa[i].value +
                  "     " +
                  ((oa[i].value / num) * 100).toFixed(2) +
                  "%"
                );
              }
            }
          },
        },
        series: [
          {
            name: "签到比例分析",
            type: "pie",
            radius: "55%",
            center: ["35%", "50%"],
            radius: ["30%", "58%"],
            data: [
              { value: 335, name: "准时" },
              { value: 310, name: "迟到" },
              { value: 234, name: "请假" },
              { value: 135, name: "未到" },
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
              borderRadius: 30,
            },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter: "{b} : {c} ({d}%)",
                },
                borderColor: "#ffffff",
                borderWidth: 10,
              },
              labelLine: { show: true },
            },
          },
        ],
      };
    },
  },
};
</script>
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
81
82
83
84
85
86
87
88
89

# 5.多层圆环

查看代码详情 
<template>
  <div ref="pie" style="height: 100%"></div>
  <!-- <WebPie :config="getOptions" :data="data"></WebPie> -->
</template>

<script>
var data1 = [
  {
    name: "男",
    name1: "本科及以上",
    value: 13211,
  },
  {
    name: "男",
    name1: "高中",
    value: 42111,
  },
  {
    name: "男",
    name1: "初中及以下",
    value: 81711,
  },
  {
    name: "男",
    name1: "其他",
    value: 121711,
  },
];
var data2 = [
  {
    name: "女",
    name1: "本科及以上",
    value: 13211,
  },
  {
    name: "女",
    name1: "高中",
    value: 42111,
  },
  {
    name: "女",
    name1: "初中及以下",
    value: 81711,
  },
  {
    name: "女",
    name1: "其他",
    value: 121711,
  },
];
var data = [...data1, ...data2];
var objData = array2obj(data, "name");
var optionData = getData(data);
function getArrayValue(array, key) {
  var key = key || "value";
  var res = [];
  if (array) {
    array.forEach(function (t) {
      res.push(t[key]);
    });
  }
  return res;
}

function array2obj(array, key) {
  var resObj = {};
  for (var i = 0; i < array.length; i++) {
    resObj[array[i][key]] = array[i];
  }
  return resObj;
}

function getData(data) {
  var res = {
    series: [],
    yAxis: [],
  };
  for (let i = 0; i < data1.length; i++) {
    res.series.push({
      name: data1[i].name1,
      type: "pie",
      clockWise: false, //顺时加载
      hoverAnimation: false, //鼠标移入变大
      radius: [80 - i * 15 + "%", 72 - i * 15 + "%"],
      center: ["30%", "55%"],
      label: {
        show: false,
      },
      itemStyle: {
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        borderRadius: [30, 30, -30, -30],
      },
      data: [
        {
          value: data1[i].value,
          name: "男",
        },
        {
          value: data2[i].value,
          name: "女",
        },
        {
          value:
            data.map((i) => i.value).reduce((p, n) => p + n, 0) -
            data1[i].value -
            data2[i].value,
          name: "",
          itemStyle: {
            color: "rgba(0,0,0,0)",
            borderWidth: 0,
          },
          tooltip: {
            show: false,
          },
          hoverAnimation: false,
        },
      ],
    });
    res.series.push({
      name: "",
      type: "pie",
      silent: true,
      z: 1,
      clockWise: false, //顺时加载
      hoverAnimation: false, //鼠标移入变大
      radius: [80 - i * 15 + "%", 72 - i * 15 + "%"],
      center: ["30%", "55%"],
      label: {
        show: false,
      },
      itemStyle: {
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
      },
      data: [
        {
          value: 7.5,
          itemStyle: {
            color: "#E3F0FF",
            borderWidth: 0,
          },
          tooltip: {
            show: false,
          },
          hoverAnimation: false,
        },
        {
          value: 2.5,
          name: "",
          itemStyle: {
            color: "rgba(0,0,0,0)",
            borderWidth: 0,
          },
          tooltip: {
            show: false,
          },
          hoverAnimation: false,
        },
      ],
    });
    res.yAxis.push(
      data1[i].name1 +
        ":" +
        (
          (data1[i].value +
            data2[i].value /
              data.map((i) => i.value).reduce((p, n) => p + n, 0)) *
          100
        ).toFixed(2) +
        "%"
    );
  }
  return res;
}
export default {
  data() {
    return {
      option: {
        title: {
          text: "男女分布",
        },
        legend: {
          show: true,
          top: "center",
          left: "70%",
          data: data.map((i) => i.name),
          itemWidth: 30,
          itemHeight: 20,
          width: 50,
          padding: [0, 5],
          itemGap: 25,
          formatter: function (name) {
            return (
              "{title|" + name + "}\n{value|" + objData[name].value + "人}"
            );
          },
          textStyle: {
            rich: {
              title: {
                fontSize: 10,
                lineHeight: 10,
                color: "rgba(0,0,0,.45)",
              },
              value: {
                fontSize: 14,
                lineHeight: 18,
                color: "rgba(0,0,0,.85)",
              },
            },
          },
        },
        tooltip: {
          show: true,
          trigger: "item",
          formatter: "{a}<br>{b}:{c}({d}%)",
        },
        color: ["#FF8700", "#ffc300", "#00e473", "#009DFF"],
        grid: {
          top: "20%",
          bottom: "48%",
          left: "30%",
          containLabel: false,
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              inside: true,
              textStyle: {
                color: "#000",
                fontSize: 10,
              },
              show: true,
            },
            data: optionData.yAxis,
          },
        ],
        xAxis: [
          {
            show: false,
          },
        ],
        series: optionData.series,
      },
    };
  },
  mounted() {
    let charts = this.$echarts.init(this.$refs.pie);
    charts.setOption(this.option);
  },
};
</script>
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268

# 6.多层圆环

查看代码详情 
<template>
  <div ref="pie" style="height: 100%"></div>
</template>

<script>
let color = ["#6d9de0", "#49d896", "#f5d03a", "#f5853a", "#f5503a"];
let chartData = [
  {
    name: "20岁以下",
    value: 20,
  },
  {
    name: "20-40岁",
    value: 30,
  },
  {
    name: "40-60岁",
    value: 30,
  },
  {
    name: "60-80岁",
    value: 10,
  },
  {
    name: "80岁以上",
    value: 10,
  },
];
let arrName = [];
let arrValue = [];
let sum = 0;
let pieSeries = [],
  lineYAxis = [];

// 数据处理
chartData.forEach((v, i) => {
  arrName.push(v.name);
  arrValue.push(v.value);
  sum = sum + v.value;
});

// 图表option整理
chartData.forEach((v, i) => {
  // console.log(v,i, v.value,sum - v.value)
  let chartnewData = chartData.slice(0, i);

  let newValue = chartnewData.reduce((a, b) => {
    return a + b.value;
  }, 0);
  v.startAngle = (newValue / sum) * 360;
  pieSeries.push({
    name: "学历",
    type: "pie",
    clockWise: false,
    hoverAnimation: false,
    radius: [75 - i * 15 + "%", 68 - i * 15 + "%"],
    center: ["40%", "50%"],
    label: {
      show: false,
    },
    startAngle: v.startAngle + 90,
    data: [
      {
        value: v.value,
        name: v.name,
      },
      {
        value: sum - v.value,
        name: "",
        itemStyle: {
          color: "rgba(0,0,0,0)",
        },
      },
    ],
  });
  pieSeries.push({
    name: "",
    type: "pie",
    silent: true,
    z: 1,
    clockWise: false, //顺时加载
    hoverAnimation: false, //鼠标移入变大
    radius: [75 - i * 15 + "%", 68 - i * 15 + "%"],
    // radius: ['50%', '70%'],
    center: ["40%", "50%"],
    label: {
      show: false,
    },
    data: [
      {
        value: sum,
        itemStyle: {
          color: "#e8f4ff", //圆环颜色
        },
      },
      {
        value: 0,
        name: "",
        itemStyle: {
          color: "red",
        },
      },
    ],
  });
  v.percent = ((v.value / sum) * 100).toFixed(0) + "%";
  lineYAxis.push({
    value: i,
    textStyle: {
      rich: {
        circle: {
          color: color[i],
          padding: [0, 5],
        },
      },
    },
  });
});
export default {
  data() {
    return {
      option: {
        backgroundColor: "#fff",
        color: color,
        legend: {
          itemWidth: 14,
          itemHeight: 8,
          show: true,
          // icon: "circle",
          // top: "center",
          left: "80%",
          top: "40%",
          formatter: (name) => {
            return (
              // {name|' + item.name + '}
              "{name|" +
              name +
              "} {percent|" +
              chartData.find((item) => {
                return item.name == name;
              }).percent +
              "}"
            );
          },
          textStyle: {
            color: "#beceff", //元字颜色
            fontSize: 14,
            rich: {
              name: {
                color: "#a6acba",
                fontSize: 11,
              },
              percent: {
                color: "#113061",
                fontSize: 11,
              },
            },
          },
        },
        grid: {
          top: "15%",
          bottom: "15%",
          left: "15%",
          containLabel: false,
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            data: lineYAxis,
          },
        ],
        xAxis: [
          {
            show: false,
          },
        ],
        series: pieSeries,
      },
    };
  },
  mounted() {
    let charts = this.$echarts.init(this.$refs.pie);
    charts.setOption(this.option);
  },
};
</script>
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194

# 7.单个饼图-玫瑰图

查看代码详情 
<template>
  <WebPie :config="getOptions" :data="data"></WebPie>
</template>

<script>
export default {
  data() {
    return {
      data: [],
    };
  },
  mounted() {
    this.data = [
      { value: 40, name: "rose 1" },
      { value: 38, name: "rose 2" },
      { value: 32, name: "rose 3" },
      { value: 30, name: "rose 4" },
      { value: 28, name: "rose 5" },
      { value: 26, name: "rose 6" },
      { value: 22, name: "rose 7" },
      { value: 18, name: "rose 8" },
    ];
  },
  methods: {
    getOptions(data) {
      return {
        title: {
          text: "单个饼图-玫瑰图",
          subtext: "单位：元",
        },
        legend: {
          top: "bottom",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "数据图",
            type: "pie",
            radius: [30, 120],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            data,
          },
        ],
      };
    },
  },
};
</script>
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

# 8.单个饼图

查看代码详情 
<template>
  <WebPie :config="getOptions" :data="data"></WebPie>
</template>

<script>
export default {
  data() {
    return {
      data: [],
    };
  },
  async created() {
    let res = await this.$api.getPie(1);
    if (res.data) {
      this.data = res.data.map((item) => ({ ...item, value: item.descript }));
    }
  },
  methods: {
    getOptions(data) {
      return {
        title: {
          text: "单个饼图",
          subtext: "单位：元",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
              { value: 580, name: "Email" },
              { value: 484, name: "Union Ads" },
              { value: 300, name: "Video Ads" },
            ],
          },
        ],
      };
    },
  },
};
</script>
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

# 9.多个饼图

查看代码详情 
<template>
  <WebPie :config="getOptions" :data="data"></WebPie>
</template>

<script>
export default {
  data() {
    return {
      data: [],
    };
  },
  async created() {
    let res = await this.$api.getPie(1);
    if (res.data) {
      this.data = res.data.map((item) => ({ ...item, value: item.descript }));
    }
  },
  methods: {
    getOptions(data) {
      return {
        title: {
          text: "angleAxis + radiusAxis + polar + 多个饼图",
          subtext: "单位：元",
        },
        angleAxis: {
          max: 2,
          startAngle: 30,
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          minorTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
        },
        radiusAxis: {
          type: "category",
          data: ["v", "w", "x", "y", "z"],
          z: 10,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          minorTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
        },
        polar: {},
        series: [
          {
            type: "bar",
            data: [4, 3, 2, 1, 0],
            coordinateSystem: "polar",
            name: "Without Round Cap",
            itemStyle: {
              borderColor: "red",
              opacity: 0.8,
              borderWidth: 1,
            },
          },
          {
            type: "bar",
            data: [4, 3, 2, 1, 0],
            coordinateSystem: "polar",
            name: "With Round Cap",
            roundCap: true,
            itemStyle: {
              borderColor: "green",
              opacity: 0.8,
              borderWidth: 1,
            },
          },
        ],
        legend: {
          show: true,
          data: ["A", "B"],
        },
      };
    },
  },
};
</script>
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

# 10.多个饼图

查看代码详情 
<template>
  <WebPie :config="getOptions" :data="data"></WebPie>
</template>

<script>
export default {
  data() {
    return {
      data: [],
    };
  },
  async created() {
    let res = await this.$api.getPie(1);
    if (res.data) {
      this.data = res.data.map((item) => ({ ...item, value: item.descript }));
    }
  },
  methods: {
    getOptions(data) {
      return {
        title: {
          text: "angleAxis + radiusAxis + polar + 多个饼图",
          subtext: "单位：元",
        },
        angleAxis: {},
        radiusAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu"],
          z: 10,
        },
        polar: {},
        series: [
          {
            type: "bar",
            data: [1, 2, 3, 4],
            coordinateSystem: "polar",
            name: "A",
            stack: "a",
            emphasis: {
              focus: "series",
            },
          },
          {
            type: "bar",
            data: [2, 4, 6, 8],
            coordinateSystem: "polar",
            name: "B",
            stack: "a",
            emphasis: {
              focus: "series",
            },
          },
          {
            type: "bar",
            data: [1, 2, 3, 4],
            coordinateSystem: "polar",
            name: "C",
            stack: "a",
            emphasis: {
              focus: "series",
            },
          },
        ],
        legend: {
          show: true,
          data: ["A", "B", "C"],
        },
      };
    },
  },
};
</script>
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

← 散点图 →