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); }); })();