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
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
type EChartsOption = echarts.EChartsOption;
type ECharts = echarts.ECharts;
const colors = ['#E8C07D', '#9FC088', '#CC704B', '#614124'];
const chartShareDatasetRef = ref<any>(null);
onMounted(() => {
getChart();
});
var shareDatasetChart: ECharts;
function getChart() {
if (shareDatasetChart != null && shareDatasetChart != undefined) {
shareDatasetChart.dispose();
}
shareDatasetChart = echarts.init(chartShareDatasetRef.value);
let option: EChartsOption;
option = {
color: colors,
// grid: { top: '55%' },
grid: {
top: 300,
bottom: 50,
left: 40,
right: 20,
},
legend: {},
tooltip: {
trigger: 'axis',
showContent: false,
axisPointer: {
type: 'shadow',
},
},
dataset: {
source: [
['product', '2012', '2013', '2014', '2015', '2016', '2017'],
['奶茶', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
['抹茶拿铁', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
['奶酪可可', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
['核桃布朗尼', 25.2, 37.1, 41.2, 18, 33.9, 49.1],
],
},
xAxis: { type: 'category' },
yAxis: { gridIndex: 0 },
series: [
{
type: 'line',
smooth: true,
seriesLayoutBy: 'row',
emphasis: { focus: 'series' },
},
{
type: 'line',
smooth: true,
seriesLayoutBy: 'row',
emphasis: { focus: 'series' },
},
{
type: 'line',
smooth: true,
seriesLayoutBy: 'row',
emphasis: { focus: 'series' },
},
{
type: 'line',
smooth: true,
seriesLayoutBy: 'row',
emphasis: { focus: 'series' },
},
{
type: 'pie',
id: 'pie',
radius: '30%',
center: ['50%', '25%'],
// emphasis: {
// focus: 'self',
// },
label: {
formatter: '{b}: {@2012} ({d}%)',
},
encode: {
itemName: 'product',
value: '2017',
tooltip: '2017',
},
},
],
};
shareDatasetChart.on('updateAxisPointer', function (event: any) {
const xAxisInfo = event.axesInfo[0];
if (xAxisInfo) {
const dimension = xAxisInfo.value + 1;
shareDatasetChart.setOption<EChartsOption>({
series: {
id: 'pie',
label: {
formatter: '{b}: {@[' + dimension + ']} ({d}%)',
},
encode: {
value: dimension,
tooltip: dimension,
},
},
});
}
});
shareDatasetChart.setOption(option);
}
</script>
<template>
<div class="fit" ref="chartShareDatasetRef"></div>
</template>
<style lang="scss" scoped></style>