Echarts dynamically changes the displayed data and charts by adding a drop-down list through Jquery

Foreword

In the project, sometimes we have some requirements, such as drawing a pie chart with Echarts, and setting a drop-down list. When I click an option, the data in the pie chart will change, and the chart style There will also be changes. We can achieve this function with Jquery.

Preparation

First, download the Js package of Jquery and Echarts and import it into the project. Here is an address:
Jquery: https://jquery.com/download/
Echarts: https://github.com/apache/echarts/releases

Write Html and CSS code

Because Echarts is used, we need to prepare a box with defined width and height, that is, a div tag to display the pie chart.

 <div class="panel pie1">
            <!--A panel is divided into two parts, title and chart-->
            <h2>Proportion of cultivated land carbon storage in each county of Guangxi (total - 10,000 tons)</h2>
            <div class="chart">chart</div>
            <!--Each box has only one before and after. If you want to set four corners on the panel, you need to add a box -->
            <div class="panel-footer"></div>
        </div>
.panel {<!-- -->
  height: 300px;
  width: 400px;
}

Write Js code

Html code is mainly used to organize the structure, Js code is the core code. We can first prepare the data to be switched (Note: the data is fake):

var cityData = [
        {<!-- -->
            name: 'Guangxi Province',
            data: [
                {<!-- -->value: 17.05, name: 'Nanning City'},
                {<!-- -->value: 14.40, name: 'Liuzhou City'},
                {<!-- -->value: 18.03, name: 'Guilin City'},
                {<!-- -->value: 58.57, name: 'Wuzhou City'},
                {<!-- -->value: 83.17, name: 'Beihai City'},
                {<!-- -->value: 44.69, name: 'Fangchenggang'},
                {<!-- -->value: 145.66, name: 'Qinzhou City'},
                {<!-- -->value: 172.15, name: 'Guigang City'},
                {<!-- -->value: 129.59, name: 'Yulin City'},
                {<!-- -->value: 158.79, name: 'Baise City'},
                {<!-- -->value: 66.44, name: 'Hezhou'},
                {<!-- -->value: 150.46, name: 'Hechi City'},
                {<!-- -->value: 102.63, name: 'Laibin City'},
                {<!-- -->value: 161.69, name: 'Chongzuo City'}
            ]
        },
        {<!-- -->
            name: 'Nanning City',
            data: [
                {<!-- -->value: 7.88, name: 'Xingning District'},
                {<!-- -->value: 6.91, name: 'Qingxiu District'},
                {<!-- -->value: 19.90, name: 'Jiangnan District'},
                {<!-- -->value: 09.44, name: 'Xixiangtang District'},
                {<!-- -->value: 4.82, name: 'Liangqing District'},
                {<!-- -->value: 18.42, name: 'Suining District'},
                {<!-- -->value: 28.83, name: 'Wu Ming District'},
                {<!-- -->value: 62.03, name: 'Long'an County'},
                {<!-- -->value: 32.48, name: 'Mashan County'},
                {<!-- -->value: 26.50, name: 'Shanglin County'},
                {<!-- -->value: 61.25, name: 'Binyang County'},
                {<!-- -->value: 01.59, name: 'Hengzhou City'}
            ]
        },
        {<!-- -->
            name: 'Liuzhou City',
            data: [
                {<!-- -->value: 1.22, name: 'Central District'},
                {<!-- -->value: 0.50, name: 'Yufeng District'},
                {<!-- -->value: 5.60, name: 'Liunan District'},
                {<!-- -->value: 2.19, name: 'Liubei District'},
                {<!-- -->value: 20.41, name: 'Liujiang District'},
                {<!-- -->value: 43.90, name: 'Liucheng County'},
                {<!-- -->value: 60.01, name: 'Luzhai County'},
                {<!-- -->value: 12.50, name: 'Rongan County'},
                {<!-- -->value: 61.72, name: 'Rongshui Miao Autonomous County'},
                {<!-- -->value: 9.35, name: 'Sanjiang Dong Autonomous County'},
            ]
        },
        {<!-- -->
            name: 'Guilin City',
            data: [
                {<!-- -->value: 42.09, name: 'Xiufeng District'},
                {<!-- -->value: 343.81, name: 'folding area'},
                {<!-- -->value: 734.00, name: 'Xiangshan District'},
                {<!-- -->value: 253.88, name: 'Seven Star District'},
                {<!-- -->value: 25535.11, name: 'Yanshan District'},
                {<!-- -->value: 153535.44, name: 'Lingui District'},
                {<!-- -->value: 48.7606, name: 'Yangshuo County'},
                {<!-- -->value: 725.65, name: 'Lingchuan County'},
                {<!-- -->value: 22256.44, name: 'Quanzhou County'},
                {<!-- -->value: 1469.74, name: 'Xing'an County'},
                {<!-- -->value: 46255.82, name: 'Yongfu County'},
                {<!-- -->value: 52753.63, name: 'Guanyang County'},
                {<!-- -->value: 2675.94, name: 'Longsheng Autonomous County of All Nationalities'},
                {<!-- -->value: 5266.66, name: 'resource county'},
                {<!-- -->value: 5267.15, name: 'Pingle County'},
                {<!-- -->value: 52554.60, name: 'Gongcheng Yao Autonomous County'},
                {<!-- -->value: 2540.02, name: 'Lipu City'}
            ]
        },
        {<!-- -->
            name: 'Wuzhou City',
            data: [
                {<!-- -->value: 2413.66, name: 'Wanxiu District'},
                {<!-- -->value: 249.05, name: 'Changzhou District'},
                {<!-- -->value: 5249.93, name: 'Longwei District'},
                {<!-- -->value: 3467.67, name: 'Cangwu County'},
                {<!-- -->value: 24235.40, name: 'Vine County'},
                {<!-- -->value: 4212446.06, name: 'Mengshan County'},
                {<!-- -->value: 4634156.79, name: 'Cenxi City'},
            ]
        },
        {<!-- -->
            name: 'Beihai City',
            data: [
                {<!-- -->value: 8.13, name: 'Haicheng District'},
                {<!-- -->value: 103.88, name: 'Silver Sea District'},
                {<!-- -->value: 95.09, name: 'Iron Mountain Port Area'},
                {<!-- -->value: 376.07, name: 'Hepu County'},
            ]
        },
        {<!-- -->
            name: 'Fangchenggang City',
            data: [
                {<!-- -->value: 4615.42, name: 'port area'},
                {<!-- -->value: 116464.58, name: 'Fangcheng District'},
                {<!-- -->value: 186449.25, name: 'Shangsi County'},
                {<!-- -->value: 26445.43, name: 'Dongxing City'},
            ]
        },
        {<!-- -->
            name: 'Qinzhou City',
            data: [
                {<!-- -->value: 253216.19, name: 'Qinnan District'},
                {<!-- -->value: 2253444.46, name: 'Qinbei District'},
                {<!-- -->value: 46301.32, name: 'Lingshan County'},
                {<!-- -->value: 186363.70, name: 'Pubei County'},
            ]
        },
        {<!-- -->
            name: 'Guigang City',
            data: [
                {<!-- -->value: 16375.75, name: 'Gangbei District'},
                {<!-- -->value: 22463.02, name: 'Kangnan District'},
                {<!-- -->value: 16373.68, name: 'Qintang District'},
                {<!-- -->value: 36365.21, name: 'Pingnan County'},
                {<!-- -->value: 59633.50, name: 'Guiping City'},
            ]
        },
        {<!-- -->
            name: 'Yulin City',
            data: [
                {<!-- -->value: 6263.47, name: 'Yuzhou District'},
                {<!-- -->value: 10663.27, name: 'Fumian District'},
                {<!-- -->value: 16352.76, name: 'Rong County'},
                {<!-- -->value: 16635.44, name: 'Luchuan County'},
                {<!-- -->value: 36363.85, name: 'Bobai County'},
                {<!-- -->value: 1684.96, name: 'Xingye County'},
                {<!-- -->value: 63203.82, name: 'Beiliu City'},
            ]
        },
        {<!-- -->
            name: 'Baise City',
            data: [
                {<!-- -->value: 85.15, name: 'Youjiang District'},
                {<!-- -->value: 108.91, name: 'Tianyang District'},
                {<!-- -->value: 126.81, name: 'Tiandong County'},
                {<!-- -->value: 126.26, name: 'Debao County'},
                {<!-- -->value: 66.76, name: 'Napo County'},
                {<!-- -->value: 58569.56, name: 'Lingyun County'},
                {<!-- -->value: 4577.07, name: 'Leye County'},
                {<!-- -->value: 1273.76, name: 'Tianlin County'},
                {<!-- -->value: 574745.41, name: 'Xilin County'},
                {<!-- -->value: 147491.67, name: 'Longlin Autonomous County of All Nationalities'},
                {<!-- -->value: 21745.54, name: 'Jingxi City'},
                {<!-- -->value: 12174.89, name: 'Pingguo City'}
            ]
        },
        {<!-- -->
            name: 'Hezhou',
            data: [
                {<!-- -->value: 151.7415, name: 'Babu District'},
                {<!-- -->value: 102747.34, name: 'Pinggui District'},
                {<!-- -->value: 53474.78, name: 'Zhaoping County'},
                {<!-- -->value: 13374.87, name: 'Zhongshan County'},
                {<!-- -->value: 187475.30, name: 'Fuchuan Yao Autonomous County'},
            ]
        },
        {<!-- -->
            name: 'Hechi City',
            data: [
                {<!-- -->value: 9851.23, name: 'Jinchengjiang District'},
                {<!-- -->value: 353.60, name: 'Yizhou District'},
                {<!-- -->value: 1385857.77, name: 'Nandan County'},
                {<!-- -->value: 56.20, name: 'Tian'e County'},
                {<!-- -->value: 688559.20, name: 'Fengshan County'},
                {<!-- -->value: 9853.06, name: 'Donglan County'},
                {<!-- -->value: 187.93, name: 'Luocheng Mulao Autonomous County'},
                {<!-- -->value: 18591.88, name: 'Huanjiang Maonan Autonomous County'},
                {<!-- -->value: 7758.52, name: 'Bama Yao Autonomous County'},
                {<!-- -->value: 18579.85, name: 'Du'an Yao Autonomous County'},
                {<!-- -->value: 11582.21, name: 'Dahua Yao Autonomous County'},
            ]
        },
        {<!-- -->
            name: 'Laibin City',
            data: [
                {<!-- -->value: 78513.64, name: 'Xingbin District'},
                {<!-- -->value: 16851.14, name: 'Xincheng County'},
                {<!-- -->value: 16385.19, name: 'Xiangzhou County'},
                {<!-- -->value: 20588.51, name: 'Wuxuan County'},
                {<!-- -->value: 18582.55, name: 'Jinxiu Yao Autonomous County'},
                {<!-- -->value: 43585.61, name: 'Heshan City'}
            ]
        },
        {<!-- -->
            name: 'Chongzuo City',
            data: [
                {<!-- -->value: 3885874.22, name: 'Jiangzhou District'},
                {<!-- -->value: 385572.66, name: 'Fusui County'},
                {<!-- -->value: 278584.62, name: 'Ningming County'},
                {<!-- -->value: 858219.63, name: 'Longzhou County'},
                {<!-- -->value: 23850.09, name: 'Daxin County'},
                {<!-- -->value: 153855.80, name: 'Tiandeng County'},
                {<!-- -->value: 268585.68, name: 'Pingxiang City'}
            ]
        }
    ]

According to the general pie chart code, first draw a pie chart that cannot be changed:

var myChart = echarts.init(document.querySelector('.pie1 .chart'));
    var option = {<!-- -->
        tooltip: {<!-- -->
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {<!-- -->
            bottom: '0%',
            itemWidth: 10,
            itemHeight: 10,
            // legend text setting
            textStyle: {<!-- -->
                color: "rgba(255,255,255,.5)",
                fontSize: "12"
            }
        },
        series: [
            {<!-- -->
                //color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '# 32c5e9', '#1d9dff'],
                name: cityData[0].name,
                type: 'pie',
                // inner circle radius and outer circle radius
                radius: ['10%', '70%'],
                // center horizontally and vertically
                center: ['50%', '40%'],
                roseType: 'radius',
                // The text label controls the relevant style of the pie chart text, note that it is an object
                label: {<!-- -->
                    color: '#fff',
                    fontSize: 12,
                },
                // guide line adjustment
                labelLine: {<!-- -->
                    show: true,
                    //Connect the fan graph line length
                    length: 6,
                    //Connection text line length
                    length2: 8
                },
                data: cityData[0].data
            }
        ]
    };
    myChart. setOption(option);
    //4. Let the chart adapt to the screen
    window. addEventListener("resize", function () {<!-- -->
        myChart. resize();
    });

The effect is as follows:

Add dropdown list and event

We add a dropdown next to the title:

 <div class="panel pie1">
            <!--A panel is divided into two parts, title and chart-->
            <h2>Proportion of cultivated land carbon storage in each county of Guangxi (total - 10,000 tons)
                <select class="code-select">
                    <option value="Guangxi Province">Guangxi Province</option>
                    <option value="Nanning">Nanning</option>
                    <option value="Liuzhou">Liuzhou</option>
                    <option value="Guilin">Guilin</option>
                    <option value="Wuzhou City">Wuzhou City</option>
                    <option value="Beihai City">Beihai City</option>
                    <option value="Fangchenggang">Fangchenggang</option>
                    <option value="Qinzhou City">Qinzhou City</option>
                    <option value="Guigang City">Guigang City</option>
                    <option value="Yulin City">Yulin City</option>
                    <option value="Baise City">Baise City</option>
                    <option value="Hezhou">Hezhou</option>
                    <option value="Hechi City">Hechi City</option>
                    <option value="Laibin City">Laibin City</option>
                    <option value="Chongzuo City">Chongzuo City</option>
                </select>
            </h2>
            <div class="chart">chart</div>
            <!--Each box has only one before and after. If you want to set four corners on the panel, you need to add a box -->
            <div class="panel-footer"></div>
        </div>

Use Jquery to capture the index of the clicked drop-down list, and switch different data according to different options:

 //5. Select the urban area to be displayed
    $('.code-select').on('change', function () {<!-- -->
        // Get the index value of the selected option
        var index = $(".code-select").get(0).selectedIndex;
        //replace data
        option.series[0].name = cityData[index].name;
        option.series[0].data = cityData[index].data;
        // re-render
        myChart. setOption(option);
    });

It is important to note here that after switching the data, the page must be re-rendered, otherwise the pie chart will not change! ! !

The effect is as follows:

The default is to display the first data. Clicking different options in the drop-down list will dynamically change the displayed data and chart style, as shown in the figure:

Complete code

//Pie Chart 1 - Proportion of Cultivated Land Carbon Storage in Guangxi Counties
(function () {
    var cityData = [
        {<!-- -->
            name: 'Guangxi Province',
            data: [
                {<!-- -->value: 17.05, name: 'Nanning City'},
                {<!-- -->value: 14.40, name: 'Liuzhou City'},
                {<!-- -->value: 18.03, name: 'Guilin City'},
                {<!-- -->value: 58.57, name: 'Wuzhou City'},
                {<!-- -->value: 83.17, name: 'Beihai City'},
                {<!-- -->value: 44.69, name: 'Fangchenggang'},
                {<!-- -->value: 145.66, name: 'Qinzhou City'},
                {<!-- -->value: 172.15, name: 'Guigang City'},
                {<!-- -->value: 129.59, name: 'Yulin City'},
                {<!-- -->value: 158.79, name: 'Baise City'},
                {<!-- -->value: 66.44, name: 'Hezhou'},
                {<!-- -->value: 150.46, name: 'Hechi City'},
                {<!-- -->value: 102.63, name: 'Laibin City'},
                {<!-- -->value: 161.69, name: 'Chongzuo City'}
            ]
        },
        {<!-- -->
            name: 'Nanning City',
            data: [
                {<!-- -->value: 7.88, name: 'Xingning District'},
                {<!-- -->value: 6.91, name: 'Qingxiu District'},
                {<!-- -->value: 19.90, name: 'Jiangnan District'},
                {<!-- -->value: 09.44, name: 'Xixiangtang District'},
                {<!-- -->value: 4.82, name: 'Liangqing District'},
                {<!-- -->value: 18.42, name: 'Suining District'},
                {<!-- -->value: 28.83, name: 'Wu Ming District'},
                {<!-- -->value: 62.03, name: 'Long'an County'},
                {<!-- -->value: 32.48, name: 'Mashan County'},
                {<!-- -->value: 26.50, name: 'Shanglin County'},
                {<!-- -->value: 61.25, name: 'Binyang County'},
                {<!-- -->value: 01.59, name: 'Hengzhou City'}
            ]
        },
        {<!-- -->
            name: 'Liuzhou City',
            data: [
                {<!-- -->value: 1.22, name: 'Central District'},
                {<!-- -->value: 0.50, name: 'Yufeng District'},
                {<!-- -->value: 5.60, name: 'Liunan District'},
                {<!-- -->value: 2.19, name: 'Liubei District'},
                {<!-- -->value: 20.41, name: 'Liujiang District'},
                {<!-- -->value: 43.90, name: 'Liucheng County'},
                {<!-- -->value: 60.01, name: 'Luzhai County'},
                {<!-- -->value: 12.50, name: 'Rongan County'},
                {<!-- -->value: 61.72, name: 'Rongshui Miao Autonomous County'},
                {<!-- -->value: 9.35, name: 'Sanjiang Dong Autonomous County'},
            ]
        },
        {<!-- -->
            name: 'Guilin City',
            data: [
                {<!-- -->value: 42.09, name: 'Xiufeng District'},
                {<!-- -->value: 343.81, name: 'folding area'},
                {<!-- -->value: 734.00, name: 'Xiangshan District'},
                {<!-- -->value: 253.88, name: 'Seven Star District'},
                {<!-- -->value: 25535.11, name: 'Yanshan District'},
                {<!-- -->value: 153535.44, name: 'Lingui District'},
                {<!-- -->value: 48.7606, name: 'Yangshuo County'},
                {<!-- -->value: 725.65, name: 'Lingchuan County'},
                {<!-- -->value: 22256.44, name: 'Quanzhou County'},
                {<!-- -->value: 1469.74, name: 'Xing'an County'},
                {<!-- -->value: 46255.82, name: 'Yongfu County'},
                {<!-- -->value: 52753.63, name: 'Guanyang County'},
                {<!-- -->value: 2675.94, name: 'Longsheng Autonomous County of All Nationalities'},
                {<!-- -->value: 5266.66, name: 'resource county'},
                {<!-- -->value: 5267.15, name: 'Pingle County'},
                {<!-- -->value: 52554.60, name: 'Gongcheng Yao Autonomous County'},
                {<!-- -->value: 2540.02, name: 'Lipu City'}
            ]
        },
        {<!-- -->
            name: 'Wuzhou City',
            data: [
                {<!-- -->value: 2413.66, name: 'Wanxiu District'},
                {<!-- -->value: 249.05, name: 'Changzhou District'},
                {<!-- -->value: 5249.93, name: 'Longwei District'},
                {<!-- -->value: 3467.67, name: 'Cangwu County'},
                {<!-- -->value: 24235.40, name: 'Vine County'},
                {<!-- -->value: 4212446.06, name: 'Mengshan County'},
                {<!-- -->value: 4634156.79, name: 'Cenxi City'},
            ]
        },
        {<!-- -->
            name: 'Beihai City',
            data: [
                {<!-- -->value: 8.13, name: 'Haicheng District'},
                {<!-- -->value: 103.88, name: 'Silver Sea District'},
                {<!-- -->value: 95.09, name: 'Iron Mountain Port Area'},
                {<!-- -->value: 376.07, name: 'Hepu County'},
            ]
        },
        {<!-- -->
            name: 'Fangchenggang City',
            data: [
                {<!-- -->value: 4615.42, name: 'port area'},
                {<!-- -->value: 116464.58, name: 'Fangcheng District'},
                {<!-- -->value: 186449.25, name: 'Shangsi County'},
                {<!-- -->value: 26445.43, name: 'Dongxing City'},
            ]
        },
        {<!-- -->
            name: 'Qinzhou City',
            data: [
                {<!-- -->value: 253216.19, name: 'Qinnan District'},
                {<!-- -->value: 2253444.46, name: 'Qinbei District'},
                {<!-- -->value: 46301.32, name: 'Lingshan County'},
                {<!-- -->value: 186363.70, name: 'Pubei County'},
            ]
        },
        {<!-- -->
            name: 'Guigang City',
            data: [
                {<!-- -->value: 16375.75, name: 'Gangbei District'},
                {<!-- -->value: 22463.02, name: 'Kangnan District'},
                {<!-- -->value: 16373.68, name: 'Qintang District'},
                {<!-- -->value: 36365.21, name: 'Pingnan County'},
                {<!-- -->value: 59633.50, name: 'Guiping City'},
            ]
        },
        {<!-- -->
            name: 'Yulin City',
            data: [
                {<!-- -->value: 6263.47, name: 'Yuzhou District'},
                {<!-- -->value: 10663.27, name: 'Fumian District'},
                {<!-- -->value: 16352.76, name: 'Rong County'},
                {<!-- -->value: 16635.44, name: 'Luchuan County'},
                {<!-- -->value: 36363.85, name: 'Bobai County'},
                {<!-- -->value: 1684.96, name: 'Xingye County'},
                {<!-- -->value: 63203.82, name: 'Beiliu City'},
            ]
        },
        {<!-- -->
            name: 'Baise City',
            data: [
                {<!-- -->value: 85.15, name: 'Youjiang District'},
                {<!-- -->value: 108.91, name: 'Tianyang District'},
                {<!-- -->value: 126.81, name: 'Tiandong County'},
                {<!-- -->value: 126.26, name: 'Debao County'},
                {<!-- -->value: 66.76, name: 'Napo County'},
                {<!-- -->value: 58569.56, name: 'Lingyun County'},
                {<!-- -->value: 4577.07, name: 'Leye County'},
                {<!-- -->value: 1273.76, name: 'Tianlin County'},
                {<!-- -->value: 574745.41, name: 'Xilin County'},
                {<!-- -->value: 147491.67, name: 'Longlin Autonomous County of All Nationalities'},
                {<!-- -->value: 21745.54, name: 'Jingxi City'},
                {<!-- -->value: 12174.89, name: 'Pingguo City'}
            ]
        },
        {<!-- -->
            name: 'Hezhou',
            data: [
                {<!-- -->value: 151.7415, name: 'Babu District'},
                {<!-- -->value: 102747.34, name: 'Pinggui District'},
                {<!-- -->value: 53474.78, name: 'Zhaoping County'},
                {<!-- -->value: 13374.87, name: 'Zhongshan County'},
                {<!-- -->value: 187475.30, name: 'Fuchuan Yao Autonomous County'},
            ]
        },
        {<!-- -->
            name: 'Hechi City',
            data: [
                {<!-- -->value: 9851.23, name: 'Jinchengjiang District'},
                {<!-- -->value: 353.60, name: 'Yizhou District'},
                {<!-- -->value: 1385857.77, name: 'Nandan County'},
                {<!-- -->value: 56.20, name: 'Tian'e County'},
                {<!-- -->value: 688559.20, name: 'Fengshan County'},
                {<!-- -->value: 9853.06, name: 'Donglan County'},
                {<!-- -->value: 187.93, name: 'Luocheng Mulao Autonomous County'},
                {<!-- -->value: 18591.88, name: 'Huanjiang Maonan Autonomous County'},
                {<!-- -->value: 7758.52, name: 'Bama Yao Autonomous County'},
                {<!-- -->value: 18579.85, name: 'Du'an Yao Autonomous County'},
                {<!-- -->value: 11582.21, name: 'Dahua Yao Autonomous County'},
            ]
        },
        {<!-- -->
            name: 'Laibin City',
            data: [
                {<!-- -->value: 78513.64, name: 'Xingbin District'},
                {<!-- -->value: 16851.14, name: 'Xincheng County'},
                {<!-- -->value: 16385.19, name: 'Xiangzhou County'},
                {<!-- -->value: 20588.51, name: 'Wuxuan County'},
                {<!-- -->value: 18582.55, name: 'Jinxiu Yao Autonomous County'},
                {<!-- -->value: 43585.61, name: 'Heshan City'}
            ]
        },
        {<!-- -->
            name: 'Chongzuo City',
            data: [
                {<!-- -->value: 3885874.22, name: 'Jiangzhou District'},
                {<!-- -->value: 385572.66, name: 'Fusui County'},
                {<!-- -->value: 278584.62, name: 'Ningming County'},
                {<!-- -->value: 858219.63, name: 'Longzhou County'},
                {<!-- -->value: 23850.09, name: 'Daxin County'},
                {<!-- -->value: 153855.80, name: 'Tiandeng County'},
                {<!-- -->value: 268585.68, name: 'Pingxiang City'}
            ]
        }
    ]
    var myChart = echarts.init(document.querySelector('.pie1 .chart'));
    var option = {<!-- -->
        tooltip: {<!-- -->
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {<!-- -->
            bottom: '0%',
            itemWidth: 10,
            itemHeight: 10,
            // legend text setting
            textStyle: {<!-- -->
                color: "rgba(255,255,255,.5)",
                fontSize: "12"
            }
        },
        series: [
            {<!-- -->
                //color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '# 32c5e9', '#1d9dff'],
                name: cityData[0].name,
                type: 'pie',
                // inner circle radius and outer circle radius
                radius: ['10%', '70%'],
                // center horizontally and vertically
                center: ['50%', '40%'],
                roseType: 'radius',
                // The text label controls the relevant style of the pie chart text, note that it is an object
                label: {<!-- -->
                    color: '#fff',
                    fontSize: 12,
                },
                // guide line adjustment
                labelLine: {<!-- -->
                    show: true,
                    //Connect the fan graph line length
                    length: 6,
                    //Connection text line length
                    length2: 8
                },
                data: cityData[0].data
            }
        ]
    };
    myChart. setOption(option);
    //4. Let the chart adapt to the screen
    window. addEventListener("resize", function () {<!-- -->
        myChart. resize();
    });
    //5. Select the urban area to be displayed
    $('.code-select').on('change', function () {<!-- -->
        // Get the index value of the selected option
        var index = $(".code-select").get(0).selectedIndex;
        //replace data
        option.series[0].name = cityData[index].name;
        option.series[0].data = cityData[index].data;
        // re-render
        myChart. setOption(option);
    });
})();