Echart堆叠图的tooltip嵌套饼图以及折线图超出上下限变色

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
option_div14 = {
    xAxis: {
        type: 'category', //种类：类别
        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月'],
        name: '月份',
        nameTextStyle: { //坐标轴名称样式
            color: "#fff",
            fontSize: 12
        },
        axisLine: { //轴线
            show: true,
            lineStyle: {
                color: "#fff",
                width: 1, //线宽
                type: 'solid', //线的形状：'solid'、'dashed'、'dotted'
                opacity: 1 //透明度：0~1
            }, //轴线的样式

        },
        axisTick: { //刻度线
            show: true,
            inside: false, //刻度线是否朝内
            length: 5, //刻度线长度
            lineStyle: { //刻度线样式
                color: "#fff",
                width: 1, //线宽
            }
        },
        axisLabel: { //坐标轴刻度标签
            show: true,
            color: "#fff",
            fontSize: 12,
            rotate: 0, //旋转角度，范围:-90~90
        },
    },
    yAxis: {
        type: 'value',
        name: '销量(件)',
        nameTextStyle: { //坐标轴名称样式
            color: "#fff",
            fontSize: 12
        },
        axisLine: { //轴线
            show: true,
            lineStyle: {
                color: "#fff",
                width: 1, //线宽
                type: 'solid', //线的形状：'solid'、'dashed'、'dotted'
                opacity: 1 //透明度：0~1
            }, //轴线的样式

        },
        axisTick: { //刻度线
            show: false,
            inside: false, //刻度线是否朝内
            length: 5, //刻度线长度
            lineStyle: { //刻度线样式
                color: "#fff",
                width: 1, //线宽
            }
        },
        axisLabel: { //坐标轴刻度标签
            show: true,
            color: "#fff",
            fontSize: 12,
            rotate: 0, //旋转角度，范围:-90~90
        },
        splitLine: { //分割线
            show: true,
            lineStyle: { //分割线样式
                color: ['#fff'],
                type: 'dashed', //线的形状：'solid'、'dashed'、'dotted'
                opacity: .5
            }
        }
    },
    legend:{

    },
    tooltip: { 
        trigger: 'axis', //axis:坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。item:数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
        formatter: params => {
            // 根据触发提示框的数据，准备饼图数据
            let pieData = [];
            for (let i in params) {
                pieData.push({
                    name: params[i].seriesName,
                    value: params[i].value,
                    color: params[i].color
                });
            }
            
            // 将饼图数据存入饼图 option.series.data
            pieOption.series.data = pieData;
            return `${params[0].axisValue}<br/><div id="tooltipPie" style="width: 100px;height:100px;"></div>`;
        },
        axisPointer: { //坐标轴指示器配置项。
            type: 'none' //'line' 直线指示器、'shadow' 阴影指示器、'none' 无指示器、'cross' 十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer。
        }
    },
    series: [{
            name: '商品A销量',
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'bar', //数据形态：柱状图
            smooth: true, //是否平滑曲线
            symbol: 'emptyCircle', //标记的图形,支持本地图片，官方样式：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
            lineStyle: { //线条样式
                color: "#f00"
            },
            stack: '商品',

        },
        {
            name: '商品B销量',
            data: [100, 500, 845, 842, 1113, 1305, 1253],
            type: 'bar', //数据形态：柱状图
            smooth: true, //是否平滑曲线
            symbol: 'emptyCircle', //标记的图形,支持本地图片，官方样式：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
            lineStyle: { //线条样式
                color: "#0f0"
            },
            stack: '商品',

        },
        {
            name: '商品C销量',
            data: [742, 822, 815, 842, 200, 1205, 1203],
            type: 'bar', //数据形态：柱状图
            smooth: true, //是否平滑曲线
            symbol: 'emptyCircle', //标记的图形,支持本地图片，官方样式：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
            lineStyle: { //线条样式
                color: "#0f0"
            },
            stack: '商品',
        }
    ]
};

// 准备一个饼图的 option
let pieOption = {
    series: {
        type: "pie",
        labelLine: {
            show: false
        },
        label: {
            show: false 
        }
    },
    animation: false
};
setInterval(function(){
    if (document.getElementById('tooltipPie') !== null && document.getElementById('tooltipPie').innerHTML === '') {
        if (typeof tooltipChart !== 'undefined') {
            return tooltipChart.setOption(pieOption);
        }
        var tooltipChart = echarts.init(document.getElementById("tooltipPie"));
        tooltipChart.setOption(pieOption);
    }
},10);

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
var upLimit = 600;  // 上限
var lowlimit = 300; // 下限

option_div15 = {
  tooltip: {
    trigger: 'axis',
    boundaryGap: false
  },
  xAxis: {
    type: 'category',
    boundaryGap: false
  },
  yAxis: {
    type: 'value'
    // boundaryGap: [0, '30%']
  },
  visualMap: [
    {
      type: 'piecewise',
      show: false,
      dimension: 1,
      seriesIndex: 0,
      pieces: [
        {
          // 不指定 min，表示 min 为无限大（-Infinity）。
          max: lowlimit, // 没有设置最小值，表明当前范围 [-Infinity, max] 变色
          color: 'red'
        },
        {
          // 不指定 max，表示 max 为无限大（Infinity）。
          min: upLimit, // 没有设置最大值，表明当前范围 [min, Infinity] 变色
          color: 'red'
        }
      ],
      outOfRange: { // 在选中范围外 的视觉元素，这里设置在正常范围内的图形颜色
        color: 'blue'
      }
    }
  ],
  series: [
    {
      type: 'line',
      smooth: true,
      symbol: 'none',
      lineStyle: {
        // color: '#5470C6', // 这里不能设置颜色，不然会以这个为准，设置的范围变色将不起作用
        width: 5
      },
      markLine: {
        symbol: 'none',
        label: {
          show: false
        },
        data: [
          {
            yAxis: upLimit
          },
          {
            yAxis: lowlimit
          }
        ]
      },
      // areaStyle: {},
      data: [
        ['2019-10-10', 200],
        ['2019-10-11', 560],
        ['2019-10-12', 750],
        ['2019-10-13', 580],
        ['2019-10-14', 250],
        ['2019-10-15', 300],
        ['2019-10-16', 450],
        ['2019-10-17', 300],
        ['2019-10-18', 100]
      ]
    }
  ]
};