<template>
    <div class="chart-screen">
        <el-row>
            <el-col :span="6" :lg="6" :md="8" :sm="12">
                <card icon="shuju_icon_qiyeshuliang" title="企业增长(趋势图)">
                    <div class="chart" ref="lineChart"></div>
                </card>
            </el-col>
            <el-col :span="6" :lg="6" :md="8" :sm="12">
                <card icon="shuju_icon_geshiqiye" title="技术买入/卖出(柱状图)">
                    <div class="chart" ref="barChart"></div>
                </card>
            </el-col>
            <el-col :span="6" :lg="6" :md="8" :sm="12">
                <card icon="shuju_icon_geshixiangmu" title="军转民/民参军(多阶梯图)">
                    <div class="chart" ref="moreLineChart"></div>
                </card>
            </el-col>
            <el-col :span="6" :lg="6" :md="8" :sm="12">
                <card icon="shuju_icon_xiangmu" title="技术交易堆叠(条形图)">
                    <div class="chart" ref="moreBarChart"></div>
                </card>
            </el-col>

            <el-col :span="6" :lg="6" :md="8" :sm="12">
                <card icon="shuju_icon_qiyeshuliang" title="各市园区(多色气泡图)">
                    <div class="chart" ref="scatterChart"></div>
                </card>
            </el-col>
            <el-col :span="6" :lg="6" :md="8" :sm="12">
                <card icon="shuju_icon_xiangmu" title="门户新闻(饼状图)">
                    <div class="chart" ref="pieChart"></div>
                </card>
            </el-col>
            <el-col :span="6" :lg="6" :md="8" :sm="12">
                <card icon="shuju_icon_qiyeshuliang" title="收入支出(瀑布图)">
                    <div class="chart" ref="waterChart"></div>
                </card>
            </el-col>
            <el-col :span="6" :lg="6" :md="8" :sm="12">
                <card icon="shuju_icon_qiyeshuliang" title="多线(雷达图)">
                    <div class="chart" ref="radarChart"></div>
                </card>
            </el-col>
            <el-col :span="12" :lg="12" :md="24">
                <card icon="shuju_icon_qiyeshuliang" title="分组(条形图)">
                    <div class="chart" ref="groupBarChart"></div>
                </card>
            </el-col>
            <el-col :span="12" :lg="12" :md="24">
                <card icon="shuju_icon_jishu" title="可拖拽图">
                    <div class="chart" ref="pictorialBox"></div>
                </card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import Card from '../components/card.vue';
import * as echarts from 'echarts';
import chartOptions from '../mixins/chartOptions';
export default {
    name: 'ChartScreen',
    components: { Card },
    mixins: [chartOptions],
    data() {
        return {
            label: [
                '南昌市',
                '景德镇市',
                '萍乡市',
                '九江市',
                '新余市',
                '鹰潭市',
                '赣州市',
                '吉安市',
                '宜春市',
                '抚州市',
                '上饶市',
            ],
            dates: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            values: [75, 23, 12, 59, 77, 14, 76, 35, 25, 11, 71],
            chartList: [],
            labelInfo: {
                val1: '南昌市',
                val2: '九江市',
                val3: '景德镇市',
                val4: '萍乡市',
                val5: '新余市',
                val6: '鹰潭市',
                val7: '赣州市',
                val8: '宜春市',
                val9: '上饶市',
                val10: '吉安市',
                val11: '抚州市',
            },
            chartMap: new Map(),
        };
    },
    mounted() {
        this.initLine();
        this.initBar();
        this.initMreLineChart();
        this.initMoreBarChart();
        this.initScatterChart();
        this.initPieChart();
        this.initWaterChat();
        this.initRadarChart();
        this.initGroupBarChart();
        this.initPictorialBox();
        this.getData();
    },
    methods: {
        getData() {
            this.$http
                .get('/summaryState/all', {
                    page: 0,
                    size: 99,
                })
                .then((res) => {
                    let list = res.content;
                    let map = new Map();
                    list.forEach((item) => {
                        let _list = [];
                        if (map.has(item.type.name)) {
                            _list = map.get(item.type.name);
                        }
                        _list.push(item);
                        map.set(item.type.name, _list);
                    });
                    console.log(map);
                });
        },
        initLine() {
            let myChart = echarts.init(this.$refs.lineChart, 'jmrh');
            this.initChat(myChart);
            myChart.setOption({
                tooltip: {
                    formatter: () => {
                        return '';
                    },
                },
                grid: {
                    bottom: 35,
                },
                color: ['#5CFFAC'],
                xAxis: {
                    data: this.dates,
                },
                series: [
                    {
                        name: '项目数量',
                        data: this.values,
                        type: 'line',
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#5CFFAC',
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(92, 255, 172, 0)',
                                    },
                                ],
                                global: false,
                            },
                        },
                        label: {
                            show: false,
                            formatter: '{b}\r\n{c}',
                            backgroundColor: '#34D281',
                            color: '#fff',
                            padding: [3, 5],
                            borderRadius: 4,
                            position: 'top',
                            textStyle: {
                                lineHeight: 16,
                            },
                        },
                        emphasis: {
                            label: {
                                show: true,
                            },
                        },
                        labelLayout: this.labelLayout,
                    },
                ],
            });
            this.chartList[0] = myChart;
        },
        initMreLineChart() {
            let myChart = echarts.init(this.$refs.moreLineChart, 'jmrh');
            this.initChat(myChart);
            let data1 = [...this.label].map((item) => {
                return this.getRadom();
            });
            let data2 = [...this.label].map((item) => {
                return this.getRadom();
            });

            myChart.setOption({
                legend: {
                    show: true,
                    data: ['军转民', '民参军'],
                    left: '10%',
                    top: 20,
                },
                grid: {
                    bottom: 35,
                    top: 70,
                },
                color: ['#5B8FF9', '#5AD8A6'],
                xAxis: {
                    data: this.label,
                    axisLabel: {
                        rotate: -60,
                        margin: 5,
                        formatter: (value) => {
                            return value.replace(/市/, '');
                        },
                    },
                },
                series: [
                    {
                        name: '军转民',
                        data: data1,
                        type: 'line',
                        step: true,
                    },
                    {
                        name: '民参军',
                        data: data2,
                        type: 'line',
                        step: true,
                    },
                ],
            });
            this.chartList[2] = myChart;
        },
        initMoreBarChart() {
            let myChart = echarts.init(this.$refs.moreBarChart, 'jmrh');
            this.initChat(myChart);
            let data1 = [...this.label].map((item) => {
                return this.getRadom();
            });
            let data2 = [...this.label].map((item) => {
                return this.getRadom();
            });

            myChart.setOption({
                legend: {
                    show: true,
                    data: ['买入数量', '卖出数量'],
                    left: '10%',
                    top: 20,
                },
                grid: {
                    bottom: 35,
                    top: 70,
                },
                xAxis: {
                    data: this.label,
                    boundaryGap: true,
                    axisLabel: {
                        rotate: -60,
                        margin: 5,
                        formatter: (value) => {
                            return value.replace(/市/, '');
                        },
                    },
                },
                series: [
                    {
                        name: '买入数量',
                        data: data1,
                        type: 'bar',
                        stack: 'one',
                    },
                    {
                        name: '卖出数量',
                        data: data2,
                        type: 'bar',
                        stack: 'one',
                    },
                ],
            });
            this.chartList[3] = myChart;
        },
        initBar() {
            let myChart = echarts.init(this.$refs.barChart, 'jmrh');
            this.initChat(myChart);
            myChart.setOption({
                grid: {
                    bottom: 35,
                },
                xAxis: {
                    data: this.label,
                    boundaryGap: true,
                    axisLabel: {
                        rotate: -60,
                        margin: 5,
                        formatter: (value) => {
                            return value.replace(/市/, '');
                        },
                    },
                },
                series: [
                    {
                        name: '项目数量',
                        data: this.values,
                        type: 'bar',
                    },
                ],
            });
            this.chartList[1] = myChart;
        },
        initScatterChart() {
            let myChart = echarts.init(this.$refs.scatterChart, 'jmrh');
            this.initChat(myChart);
            let data1 = [...this.label].map((item) => {
                return this.getRadom();
            });
            let data2 = [...this.label].map((item) => {
                return this.getRadom();
            });
            let data3 = [...this.label].map((item) => {
                return this.getRadom();
            });
            let data4 = [...this.label].map((item) => {
                return this.getRadom();
            });

            let itemStyle = {
                opacity: 0.8,
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowColor: 'rgba(0,0,0,0.3)',
            };

            myChart.setOption({
                legend: {
                    show: true,
                    data: ['第一季度', '第二季度', '第三季度', '第四季度'],
                    left: '10%',
                    top: 20,
                },
                grid: {
                    bottom: 35,
                    top: 70,
                },
                xAxis: {
                    data: this.label,
                    boundaryGap: true,
                    axisLabel: {
                        rotate: -60,
                        margin: 5,
                        formatter: (value) => {
                            return value.replace(/市/, '');
                        },
                    },
                },
                series: [
                    {
                        name: '第一季度',
                        data: data1,
                        type: 'scatter',
                        stack: 'one',
                        itemStyle: itemStyle,
                    },
                    {
                        name: '第二季度',
                        data: data2,
                        type: 'scatter',
                        stack: 'one',
                        itemStyle: itemStyle,
                    },
                    {
                        name: '第三季度',
                        data: data3,
                        type: 'scatter',
                        stack: 'one',
                        itemStyle: itemStyle,
                    },
                    {
                        name: '第四季度',
                        data: data4,
                        type: 'scatter',
                        stack: 'one',
                        itemStyle: itemStyle,
                    },
                ],
            });
            this.chartList[4] = myChart;
        },
        initPieChart() {
            let myChart = echarts.init(this.$refs.pieChart, 'jmrh');
            // this.initChat(myChart);

            myChart.setOption({
                tooltip: {
                    trigger: 'item',
                },
                legend: {
                    show: true,
                    left: 20,
                    top: 0,
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '50%',
                        top: 40,
                        data: [
                            { value: 1048, name: '热点推荐' },
                            { value: 735, name: '新闻资讯' },
                            { value: 580, name: '行业动态' },
                            { value: 484, name: '通知通告' },
                            { value: 300, name: '政策法规' },
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)',
                            },
                        },
                    },
                ],
            });

            this.chartList[6] = myChart;
        },
        initWaterChat() {
            let myChart = echarts.init(this.$refs.waterChart, 'jmrh');
            myChart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
                    },
                    formatter: function (params) {
                        var tar;
                        if (params[1].value !== '-') {
                            tar = params[1];
                        } else {
                            tar = params[0];
                        }
                        return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
                    },
                },
                legend: {
                    data: ['支出', '收入'],
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true,
                },
                xAxis: {
                    type: 'category',
                    splitLine: { show: false },
                    data: (function () {
                        var list = [];
                        for (var i = 1; i <= 11; i++) {
                            list.push('11月' + i + '日');
                        }
                        return list;
                    })(),
                },
                yAxis: {
                    type: 'value',
                },
                series: [
                    {
                        name: '辅助',
                        type: 'bar',
                        stack: '总量',
                        itemStyle: {
                            barBorderColor: 'rgba(0,0,0,0)',
                            color: 'rgba(0,0,0,0)',
                        },
                        emphasis: {
                            itemStyle: {
                                barBorderColor: 'rgba(0,0,0,0)',
                                color: 'rgba(0,0,0,0)',
                            },
                        },
                        data: [0, 900, 1245, 1530, 1376, 1376, 1511, 1689, 1856, 1495, 1292],
                    },
                    {
                        name: '收入',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            show: true,
                            position: 'top',
                        },
                        data: [900, 345, 393, '-', '-', 135, 178, 286, '-', '-', '-'],
                    },
                    {
                        name: '支出',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            show: true,
                            position: 'bottom',
                        },
                        data: ['-', '-', '-', 108, 154, '-', '-', '-', 119, 361, 203],
                    },
                ],
            });
            this.chartList[7] = myChart;
        },
        initRadarChart() {
            let myChart = echarts.init(this.$refs.radarChart, 'jmrh');
            var dataBJ = [
                [55, 9, 56, 0.46, 18, 6, 1],
                [25, 11, 21, 0.65, 34, 9, 2],
                [56, 7, 63, 0.3, 14, 5, 3],
                [33, 7, 29, 0.33, 16, 6, 4],
                [42, 24, 44, 0.76, 40, 16, 5],
                [82, 58, 90, 1.77, 68, 33, 6],
                [74, 49, 77, 1.46, 48, 27, 7],
                [78, 55, 80, 1.29, 59, 29, 8],
                [267, 216, 280, 4.8, 108, 64, 9],
                [185, 127, 216, 2.52, 61, 27, 10],
                [39, 19, 38, 0.57, 31, 15, 11],
                [41, 11, 40, 0.43, 21, 7, 12],
                [64, 38, 74, 1.04, 46, 22, 13],
                [108, 79, 120, 1.7, 75, 41, 14],
                [108, 63, 116, 1.48, 44, 26, 15],
                [33, 6, 29, 0.34, 13, 5, 16],
                [94, 66, 110, 1.54, 62, 31, 17],
                [186, 142, 192, 3.88, 93, 79, 18],
                [57, 31, 54, 0.96, 32, 14, 19],
                [22, 8, 17, 0.48, 23, 10, 20],
                [39, 15, 36, 0.61, 29, 13, 21],
                [94, 69, 114, 2.08, 73, 39, 22],
                [99, 73, 110, 2.43, 76, 48, 23],
                [31, 12, 30, 0.5, 32, 16, 24],
                [42, 27, 43, 1, 53, 22, 25],
                [154, 117, 157, 3.05, 92, 58, 26],
                [234, 185, 230, 4.09, 123, 69, 27],
                [160, 120, 186, 2.77, 91, 50, 28],
                [134, 96, 165, 2.76, 83, 41, 29],
                [52, 24, 60, 1.03, 50, 21, 30],
                [46, 5, 49, 0.28, 10, 6, 31],
            ];

            var dataGZ = [
                [26, 37, 27, 1.163, 27, 13, 1],
                [85, 62, 71, 1.195, 60, 8, 2],
                [78, 38, 74, 1.363, 37, 7, 3],
                [21, 21, 36, 0.634, 40, 9, 4],
                [41, 42, 46, 0.915, 81, 13, 5],
                [56, 52, 69, 1.067, 92, 16, 6],
                [64, 30, 28, 0.924, 51, 2, 7],
                [55, 48, 74, 1.236, 75, 26, 8],
                [76, 85, 113, 1.237, 114, 27, 9],
                [91, 81, 104, 1.041, 56, 40, 10],
                [84, 39, 60, 0.964, 25, 11, 11],
                [64, 51, 101, 0.862, 58, 23, 12],
                [70, 69, 120, 1.198, 65, 36, 13],
                [77, 105, 178, 2.549, 64, 16, 14],
                [109, 68, 87, 0.996, 74, 29, 15],
                [73, 68, 97, 0.905, 51, 34, 16],
                [54, 27, 47, 0.592, 53, 12, 17],
                [51, 61, 97, 0.811, 65, 19, 18],
                [91, 71, 121, 1.374, 43, 18, 19],
                [73, 102, 182, 2.787, 44, 19, 20],
                [73, 50, 76, 0.717, 31, 20, 21],
                [84, 94, 140, 2.238, 68, 18, 22],
                [93, 77, 104, 1.165, 53, 7, 23],
                [99, 130, 227, 3.97, 55, 15, 24],
                [146, 84, 139, 1.094, 40, 17, 25],
                [113, 108, 137, 1.481, 48, 15, 26],
                [81, 48, 62, 1.619, 26, 3, 27],
                [56, 48, 68, 1.336, 37, 9, 28],
                [82, 92, 174, 3.29, 0, 13, 29],
                [106, 116, 188, 3.628, 101, 16, 30],
                [118, 50, 0, 1.383, 76, 11, 31],
            ];

            var dataSH = [
                [91, 45, 125, 0.82, 34, 23, 1],
                [65, 27, 78, 0.86, 45, 29, 2],
                [83, 60, 84, 1.09, 73, 27, 3],
                [109, 81, 121, 1.28, 68, 51, 4],
                [106, 77, 114, 1.07, 55, 51, 5],
                [109, 81, 121, 1.28, 68, 51, 6],
                [106, 77, 114, 1.07, 55, 51, 7],
                [89, 65, 78, 0.86, 51, 26, 8],
                [53, 33, 47, 0.64, 50, 17, 9],
                [80, 55, 80, 1.01, 75, 24, 10],
                [117, 81, 124, 1.03, 45, 24, 11],
                [99, 71, 142, 1.1, 62, 42, 12],
                [95, 69, 130, 1.28, 74, 50, 13],
                [116, 87, 131, 1.47, 84, 40, 14],
                [108, 80, 121, 1.3, 85, 37, 15],
                [134, 83, 167, 1.16, 57, 43, 16],
                [79, 43, 107, 1.05, 59, 37, 17],
                [71, 46, 89, 0.86, 64, 25, 18],
                [97, 71, 113, 1.17, 88, 31, 19],
                [84, 57, 91, 0.85, 55, 31, 20],
                [87, 63, 101, 0.9, 56, 41, 21],
                [104, 77, 119, 1.09, 73, 48, 22],
                [87, 62, 100, 1, 72, 28, 23],
                [168, 128, 172, 1.49, 97, 56, 24],
                [65, 45, 51, 0.74, 39, 17, 25],
                [39, 24, 38, 0.61, 47, 17, 26],
                [39, 24, 39, 0.59, 50, 19, 27],
                [93, 68, 96, 1.05, 79, 29, 28],
                [188, 143, 197, 1.66, 99, 51, 29],
                [174, 131, 174, 1.55, 108, 50, 30],
                [187, 143, 201, 1.39, 89, 53, 31],
            ];

            var lineStyle = {
                normal: {
                    width: 1,
                    opacity: 0.5,
                },
            };

            myChart.setOption({
                legend: {
                    top: 10,
                    left: 10,
                    data: ['北京', '上海', '广州'],
                    itemGap: 20,
                    orient: 'vertical',
                    textStyle: {
                        color: '#fff',
                        fontSize: 14,
                    },
                    selectedMode: 'single',
                },
                // visualMap: {
                //     show: true,
                //     min: 0,
                //     max: 20,
                //     dimension: 6,
                //     inRange: {
                //         colorLightness: [0.5, 0.8]
                //     }
                // },
                radar: {
                    left: 30,
                    indicator: [
                        { name: 'AQI', max: 300 },
                        { name: 'PM2.5', max: 250 },
                        { name: 'PM10', max: 300 },
                        { name: 'CO', max: 5 },
                        { name: 'NO2', max: 200 },
                        { name: 'SO2', max: 100 },
                    ],
                    shape: 'circle',
                    splitNumber: 5,
                    name: {
                        textStyle: {
                            color: 'rgb(238, 197, 102)',
                        },
                    },
                    splitLine: {
                        lineStyle: {
                            color: [
                                'rgba(238, 197, 102, 0.1)',
                                'rgba(238, 197, 102, 0.2)',
                                'rgba(238, 197, 102, 0.4)',
                                'rgba(238, 197, 102, 0.6)',
                                'rgba(238, 197, 102, 0.8)',
                                'rgba(238, 197, 102, 1)',
                            ].reverse(),
                        },
                    },
                    splitArea: {
                        show: false,
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(238, 197, 102, 0.5)',
                        },
                    },
                },
                series: [
                    {
                        name: '北京',
                        type: 'radar',
                        lineStyle: lineStyle,
                        data: dataBJ,
                        symbol: 'none',
                        itemStyle: {
                            color: '#F9713C',
                        },
                        areaStyle: {
                            opacity: 0.1,
                        },
                    },
                    {
                        name: '上海',
                        type: 'radar',
                        lineStyle: lineStyle,
                        data: dataSH,
                        symbol: 'none',
                        itemStyle: {
                            color: '#B3E4A1',
                        },
                        areaStyle: {
                            opacity: 0.05,
                        },
                    },
                    {
                        name: '广州',
                        type: 'radar',
                        lineStyle: lineStyle,
                        data: dataGZ,
                        symbol: 'none',
                        itemStyle: {
                            color: 'rgb(238, 197, 102)',
                        },
                        areaStyle: {
                            opacity: 0.05,
                        },
                    },
                ],
            });

            this.chartList[8] = myChart;
        },
        initGroupBarChart() {
            let myChart = echarts.init(this.$refs.groupBarChart, 'jmrh');
            this.initChat(myChart);
            myChart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
                    },
                },
                legend: {
                    right: 30,
                    data: ['利润', '收入'],
                },
                grid: {
                    top: 20,
                },
                xAxis: [
                    {
                        type: 'value',
                    },
                ],
                yAxis: [
                    {
                        type: 'category',
                        axisTick: {
                            show: false,
                        },
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                    },
                ],
                series: [
                    {
                        name: '利润',
                        type: 'bar',
                        label: {
                            show: true,
                            position: 'inside',
                        },
                        emphasis: {
                            focus: 'series',
                        },
                        data: [200, 170, 240, 244, 200, 220, 210],
                    },
                    {
                        name: '收入',
                        type: 'bar',
                        stack: '总量',
                        label: {
                            show: true,
                        },
                        emphasis: {
                            focus: 'series',
                        },
                        data: [320, 302, 341, 374, 390, 450, 420],
                    },
                ],
            });
            this.chartList[9] = myChart;
        },
        initPictorialBox() {
            let myChart = echarts.init(this.$refs.pictorialBox, 'jmrh');
            var symbolSize = 20;
            var data = [
                [40, -10],
                [-30, -5],
                [-76.5, 20],
                [-63.5, 40],
                [-22.1, 50],
            ];

            let option = {
                tooltip: {
                    triggerOn: 'none',
                    formatter: function (params) {
                        return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);
                    },
                },
                grid: {
                    top: 20,
                    bottom: 30,
                },
                xAxis: {
                    min: -100,
                    max: 70,
                    type: 'value',
                    axisLine: { onZero: false },
                },
                yAxis: {
                    min: -30,
                    max: 60,
                    type: 'value',
                    axisLine: { onZero: false },
                },
                // dataZoom: [
                //     {
                //         type: 'slider',
                //         xAxisIndex: 0,
                //         filterMode: 'none',
                //     },
                //     {
                //         type: 'slider',
                //         yAxisIndex: 0,
                //         filterMode: 'none',
                //     },
                //     {
                //         type: 'inside',
                //         xAxisIndex: 0,
                //         filterMode: 'none',
                //     },
                //     {
                //         type: 'inside',
                //         yAxisIndex: 0,
                //         filterMode: 'none',
                //     },
                // ],
                series: [
                    {
                        id: 'a',
                        type: 'line',
                        smooth: true,
                        symbolSize: symbolSize,
                        data: data,
                    },
                ],
            };

            setTimeout(function () {
                // Add shadow circles (which is not visible) to enable drag.
                myChart.setOption({
                    graphic: data.map(function (item, dataIndex) {
                        return {
                            type: 'circle',
                            position: myChart.convertToPixel('grid', item),
                            shape: {
                                cx: 0,
                                cy: 0,
                                r: symbolSize / 2,
                            },
                            invisible: true,
                            draggable: true,
                            ondrag: function (dx, dy) {
                                onPointDragging(dataIndex, [this.x, this.y]);
                            },
                            onmousemove: function () {
                                showTooltip(dataIndex);
                            },
                            onmouseout: function () {
                                hideTooltip(dataIndex);
                            },
                            z: 100,
                        };
                    }),
                });
            }, 0);

            window.addEventListener('resize', updatePosition);

            myChart.on('dataZoom', updatePosition);

            function updatePosition() {
                myChart.setOption({
                    graphic: data.map(function (item, dataIndex) {
                        return {
                            position: myChart.convertToPixel('grid', item),
                        };
                    }),
                });
            }

            function showTooltip(dataIndex) {
                myChart.dispatchAction({
                    type: 'showTip',
                    seriesIndex: 0,
                    dataIndex: dataIndex,
                });
            }

            function hideTooltip(dataIndex) {
                myChart.dispatchAction({
                    type: 'hideTip',
                });
            }

            function onPointDragging(dataIndex, pos) {
                data[dataIndex] = myChart.convertFromPixel('grid', pos);

                // Update data
                myChart.setOption({
                    series: [
                        {
                            id: 'a',
                            data: data,
                        },
                    ],
                });
            }

            myChart.setOption(option);
            this.chartList[10] = myChart;
        },
        resize() {
            let list = [...this.chartList];
            list.forEach((item) => {
                if (item) {
                    item.resize();
                }
            });
        },
        getRadom() {
            return Math.floor(Math.random() * 100) + 1;
        },
    },
};
</script>

<style lang="less" scoped>
.el-col {
    min-height: 330px;
    height: 30vh;
    padding: 10px;
    box-sizing: border-box;
}
.chart {
    width: 100%;
    height: 100%;
}
.chart-screen {
    overflow-x: hidden;
    overflow-y: auto;
    padding: 20px;
}
</style>
