Idatav

https://github.com/yyhsong/idatav
Admin
大屏数据可视化 Big screen data visualization demo
Tokens:16,214
Snippets:30
Trust Score:9.2
Update:1 year ago
Show doc for...
Tokens:
Raw
### Animate Number Display with CountUp.js

Source: https://github.com/yyhsong/idatav/blob/master/case09/index.html

This JavaScript function 'rollNum' uses the 'CountUp.js' library to animate a numerical display from a 'startVal' to an 'endVal' for a specified HTML element ('elId'). It allows for decimal precision and includes error handling to log issues if the animation fails to start.

```JavaScript
function rollNum(elId, startVal, endVal, decimalNum) {
  let n = decimalNum || 0;
  let countUp = new CountUp(elId, startVal, endVal, n, 2.5, { useEasing: true, useGrouping: true, separator: ',', decimal: '.' });
  if(!countUp.error) {
    countUp.start();
  }else {
    console.error(countUp.error);
  }
}
```

--------------------------------

### Implement Responsive ECharts Resizing on Window Change

Source: https://github.com/yyhsong/idatav/blob/master/case02/index.html

This JavaScript snippet demonstrates how to make ECharts instances responsive by attaching a function to the window.onresize event. When the browser window is resized, it calls the resize() method on bar3D, globe3D, and bar2D chart instances, ensuring they adapt to the new dimensions.

```javascript
/******** 浏览器窗口改变时，重置报表大小 **********/ window.onresize = function() { bar3D.resize(); globe3D.resize(); bar2D.resize(); }
```

--------------------------------

### Configure ECharts 3D Bar Chart Options and Render

Source: https://github.com/yyhsong/idatav/blob/master/case02/index.html

This JavaScript snippet illustrates a fragment of an ECharts 3D bar chart configuration, including axis definitions, data mapping for a bar3D series, shading, and label styling. It concludes with the call to setOption to render the chart using the defined options.

```javascript
yData }, zAxis3D: { type: 'value', name: '' }, series: [{ type: 'bar3D', data: data2.map(function (item) { return { value: [item[1], item[0], item[2]], } }), shading: 'lambert', label: { textStyle: { fontSize: 16, borderWidth: 1 } }, emphasis: { label: { textStyle: { fontSize: 20, } } } }] } //渲染图表 bar2D.setOption(barOpt2);
```

--------------------------------

### Initialize and Configure ECharts Scatter Map

Source: https://github.com/yyhsong/idatav/blob/master/case01/index.html

This snippet initializes an ECharts instance for a scatter map, configures its geographic properties, and sets up a scatter series to display data. It defines visual styles for normal and emphasized states of map areas and data points, assuming an element with ID 'scatterMap' exists.

```javascript
const scatterMap = echarts.init(document.getElementById("scatterMap"));
const sactterMapOpt = {
  geo: {
    hasis: { show: false },
    itemStyle: {
      normal: { areaColor: '#101f32', borderWidth: 1.1, borderColor: '#43d0d6' },
      emphasis: { areaColor: '#069' }
    }
  },
  series: [{
    name: 'PM2.5',
    type: 'scatter',
    coordinateSystem: 'geo',
    symbolSize: 12,
    label: { normal: { show: false }, emphasis: { show: false } },
    itemStyle: { emphasis: { borderColor: '#fff', borderWidth: 1 } },
    data: convertScatterData(scatterVal)
  }]
};
scatterMap.setOption(sactterMapOpt);
```

--------------------------------

### Initialize ECharts Word Cloud with Custom Options

Source: https://github.com/yyhsong/idatav/blob/master/case04/index.html

This snippet initializes an ECharts instance for a word cloud visualization. It configures the word cloud with various options such as shape, size range, rotation range, and custom text styles for words, including a random color generator. It also provides sample data for the word cloud.

```JavaScript
//初始化echarts实例
const wordChart= echarts.init(document.getElementById("wordChart"));
const wordOpt = {
    series: [{
        type: 'wordCloud',
        shape: 'circle', //circle cardioid diamond triangle-forward triangle
        left: 0,
        right: 0,
        top: 0,
        right: 0,
        width: '100%',
        height: '100%',
        gridSize: 0, //值越大，word间的距离越大，单位像素
        sizeRange: [10, 32], //word的字体大小区间，单位像素
        rotationRange: [-90, 90], //word的可旋转角度区间
        textStyle: {
            normal: {
                color: function() {
                    return 'rgb(' + [
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160)
                    ].join(',') + ')';
                }
            },
            emphasis: {
                shadowBlur: 2,
                shadowColor: '#000'
            }
        },
        data: [{
            name: '数据可视化',
            value: 3000,
            textStyle: {
                normal: {color: '#f52f55'},
                emphasis: {}
            }
        }, {
            name: '大数据',
            value: 2181
        }, {
            name: '云计算',
            value: 1386
        }, {
            name: '物联网',
            value: 2055
        }, {
            name: '移动互联网',
            value: 2467
        }, {
            name: '人工智能',
            value: 2244
        }, {
            name: '深度学习',
            value: 1898
        }, {
            name: '机器学习',
            value: 1484
        }, {
            name: '区块链',
            value: 3865
        }, {
            name: 'AI',
            value: 897
        }, {
            name: 'Big Data',
            value: 847
        }, {
            name: 'Deep Learning',
            value: 1366
        }, {
            name: 'IoT',
            value: 555
        }, {
            name: 'Data Visualization',
            value: 550
        }, {
            name: '互联网+',
            value: 2222
        }, {
            name: '智能合约',
            value: 366
        }, {
            name: '比特币',
            value: 360
        }, {
            name: 'Block Chain',
            value: 282
        }, {
            name: '数据挖掘',
            value: 273
        }, {
            name: 'Hadoop',
            value: 265
        }]
    }],
    backgroundColor: 'rgba(255, 255, 255, 0.7)'
};
wordChart.setOption(wordOpt);
```

--------------------------------

### Initialize ECharts BMap for Listed Company Distribution

Source: https://github.com/yyhsong/idatav/blob/master/case07/index.html

This JavaScript code initializes an ECharts instance on a `div` element, integrating it with Baidu Maps (BMap) to visualize the geographic distribution of listed companies. It configures the map's title, tooltip, and a piecewise visual map to differentiate companies by stock exchange (Shanghai or Shenzhen) using distinct colors. The code also applies extensive custom styling to the Baidu Map, fetches company data from a `listed-company.json` file via AJAX, processes the data to include geographic coordinates and exchange information, and then updates the map series. It also includes a window resize listener for responsiveness.

```JavaScript
$(function() { //初始化地图报表
  const mapChart = echarts.init(document.getElementById("mapChart"));
  const mapChartOpt = {
    title: {
      text: "上市公司地域分布",
      subtext: "纯属虚构",
      top: 5,
      left: "center",
      textStyle: {
        color: "#fff"
      }
    },
    tooltip: {
      trigger: 'item'
    },
    visualMap: {
      type: "piecewise",
      left: 15,
      top: 15,
      itemWidth: 15,
      min: 1,
      max: 2,
      splitNumber: 2,
      pieces: [ {min:1, max:1, label:"上交所", color:"#970f48"}, {min:2, max:2, label:"深交所", color:"#f4e935"} ],
      textStyle: {
        color: "#fff"
      },
      calculable: true,
      seriesIndex: [0]
    },
    bmap: {
      center: [108.943393, 34.384291],
      zoom: 6, //地图缩放级别
      roam: true, //开启鼠标缩放和漫游
      mapStyle: { //定制地图样式
        styleJson: [ { "featureType": "water", "elementType": "all", "stylers": { "color": "#044161" } }, { "featureType": "land", "elementType": "all", "stylers": { "color": "#004981" } }, { "featureType": "boundary", "elementType": "geometry", "stylers": { "color": "#064f85" } }, { "featureType": "railway", "elementType": "all", "stylers": { "visibility": "off" } }, { "featureType": "highway", "elementType": "geometry", "stylers": { "visibility": "off", "color": "#004981" } }, { "featureType": "highway", "elementType": "geometry.fill", "stylers": { "color": "#005b96", "lightness": 1 } }, { "featureType": "highway", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "arterial", "elementType": "geometry", "stylers": { "color": "#004981" } }, { "featureType": "arterial", "elementType": "geometry.fill", "stylers": { "color": "#00508b" } }, { "featureType": "poi", "elementType": "all", "stylers": { "visibility": "off" } }, { "featureType": "green", "elementType": "all", "stylers": { "color": "#056197", "visibility": "off" } }, { "featureType": "subway", "elementType": "all", "stylers": { "visibility": "off" } }, { "featureType": "manmade", "elementType": "all", "stylers": { "visibility": "off" } }, { "featureType": "local", "elementType": "all", "stylers": { "visibility": "off" } }, { "featureType": "arterial", "elementType": "labels", "stylers": { "visibility": "off" } }, { "featureType": "boundary", "elementType": "geometry.fill", "stylers": { "color": "#029fd4" } }, { "featureType": "building", "elementType": "all", "stylers": { "color": "#1a5787" } }, { "featureType": "label", "elementType": "all", "stylers": { "visibility": "off" } } ]
      }
    },
    series: [{
      name: "上市公司地域分布",
      type: "effectScatter",
      coordinateSystem: "bmap",
      symbol: 'circle',
      symbolSize: 6,
      showEffectOn: 'emphasis',
      rippleEffect: { //涟漪特效
        period: 2, //特效动画时长
        scale: 3, //波纹的最大缩放比例
        brushType: 'stroke' //波纹的绘制方式：stroke | fill
      },
      hoverAnimation: true,
      itemStyle: {
        normal: {
          color: function(params) {
            const d = params.data;
            if(d.exchange.toLowerCase() == "sh") {
              return '#970f48';
            }
            return '#f4e935';
          },
          opacity: .85
        }
      },
      tooltip: {
        formatter: function(params) {
          const poi = params.data;
          let tip = poi.company + '<br />';
          tip += '股票代码：' + poi.code + '<br />';
          tip += '股票名称：' + poi.name + '<br />';
          tip += '注册地址：' + poi.address + '<br />';
          return tip;
        }
      },
      zlevel: 1,
      data: []
    }]
  };
  mapChart.setOption(mapChartOpt);

  //获取地图报表数据
  $.ajax({
    url: "data/listed-company.json",
    dataType: "json"
  }).done(function(data) {
    //console.log("RespData: ", data);
    let pointData = [];
    for(let i=0;i<data.length;i++) {
      const poi = data[i];
      const v = poi.stock_exchange.toLowerCase()=="sh" ? 1 : 2;
      pointData.push({
        name: poi.stock_name,
        value: [poi.lng, poi.lat, v],
        code: poi.stock_code,
        company: poi.company_name,
        address: poi.registered_address,
        exchange: poi.stock_exchange
      });
    }
    mapChart.setOption({
      series: [{
        name: '上市公司地域分布',
        data: pointData
      }]
    });
  }).fail(function(jqXHR) {
    console.error("Ajax Error: ", jqXHR.status, jqXHR.statusText);
  });

  $(window).resize(function() {
    mapChart.resize();
  });
});
```

--------------------------------

### Apply Options to ECharts Ball Chart

Source: https://github.com/yyhsong/idatav/blob/master/case04/index.html

This snippet applies a predefined options object (`ballOpt`) to an ECharts instance named `ballChart`. This action renders or updates the ball chart visualization based on the configurations specified in `ballOpt`.

```JavaScript
ballChart.setOption(ballOpt);
```

--------------------------------

### Resize ECharts Maps on Window Resize

Source: https://github.com/yyhsong/idatav/blob/master/case01/index.html

This snippet sets up an event listener for the browser's window resize event. When the window size changes, it calls the `resize()` method on all initialized ECharts map instances (flyMap, scatterMap, worldMap, provinceMap, cityMap, countyMap) to ensure they adapt to the new dimensions.

```javascript
window.onresize = function() {
  flyMap.resize();
  scatterMap.resize();
  worldMap.resize();
  provinceMap.resize();
  cityMap.resize();
  countyMap.resize();
};
```

--------------------------------

### Initialize and Configure ECharts Bar Chart for Ranking

Source: https://github.com/yyhsong/idatav/blob/master/case09/index.html

This JavaScript code initializes an ECharts instance for a bar chart, configured to display market capitalization rankings. It includes custom tooltip formatting, grid settings, and styling for bars with linear gradients and emphasis effects.

```JavaScript
const rankChart = echarts.init(document.getElementById("rankChart"), "shine");
const rankChartOpt = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow"
    },
    formatter: function(params) {
      const param = params[0];
      const marker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#e6b600;"></span>';
      const suffix = '<span style="margin-left:5px;font-size:12px;">亿元</span>';
      return param.name + "<br />" + marker + "排名：" + (param.dataIndex+1) + "<br />" + marker + "市价总值：" + param.value + suffix;
    }
  },
  grid: {
    top: 10,
    bottom: 10,
    left: 60
  },
  xAxis: {
    show: false,
    type: "value"
  },
  yAxis: {
    type: "category",
    inverse: true,
    axisLine: {show: false},
    axisTick: {show: false},
    axisLabel: {
      fontSize: 12,
      color: "#b0c2f9"
    }
  },
  series: [{
    name: "市价总值排行",
    type: "bar",
    barCategoryGap: "60%",
    label: {
      show: true,
      position: "right",
      fontSize: 12,
      color: "#188df0",
      emphasis: {
        color: "#e6b600"
      }
    },
    itemStyle: {
      normal: {
        color: new echarts.graphic.LinearGradient(
          0, 1, 1, 1,
          [
            {offset: 0, color: '#b0c2f9'},
            {offset: 0.5, color: '#188df0'},
            {offset: 1, color: '#185bff'}
          ]
        )
      },
      emphasis: {
        color: new echarts.graphic.LinearGradient(
          0, 1, 1, 1,
          [
            {offset: 0, color: '#b0c2f9'},
            {offset: 0.7, color: '#e6b600'},
            {offset: 1, color: '#ceac09'}
          ]
        )
      }
    }
  }]
};
```

--------------------------------

### Configure ECharts Relation Graph Chart

Source: https://github.com/yyhsong/idatav/blob/master/case04/index.html

This snippet initializes and configures an ECharts relation graph. It defines node categories (e.g., 'Full Stack', 'Frontend', 'Backend'), data nodes with their categories, and links between them. The chart uses a force layout with repulsion and custom styling for labels and edges.

```JavaScript
const relationChart = echarts.init(document.getElementById("relationChart"));
const relationOpt = {
  animationDurationUpdate: 1500,
  animationEasingUpdate: 'quinticInOut',
  label: {
    normal: {
      show: true,
      textStyle: {
        fontSize: 12
      }
    }
  },
  series: [{
    type: 'graph',
    symbolSize: 45,
    focusNodeAdjacency: true,
    roam: true,
    layout: 'force',
    force: {
      repulsion: 320
    },
    label: {
      normal: {
        show: true,
        textStyle: {
          fontSize: 12
        }
      }
    },
    edgeSymbolSize: [4, 50],
    edgeLabel: {
      normal: {
        show: true,
        textStyle: {
          fontSize: 10
        },
        formatter: "{c}"
      }
    },
    categories: [{
      name: '全栈',
      itemStyle: {
        normal: {
          color: '#f2637b'
        }
      }
    }, {
      name: '前端',
      itemStyle: {
        normal: {
          color: "#eaa674"
        }
      }
    }, {
      name: '移动端',
      itemStyle: {
        normal: {
          color: "#3aa1ff"
        }
      }
    }, {
      name: '服务端',
      itemStyle: {
        normal: {
          color: "#4ecb73"
        }
      }
    }],
    data: [{
      name: '全栈',
      category: 0,
      draggable: true
    }, {
      name: '前端',
      category: 1,
      draggable: true
    }, {
      name: '移动端',
      category: 2,
      draggable: true
    }, {
      name: '服务端',
      category: 3,
      draggable: true
    }, {
      name: 'HTML',
      category: 1,
      draggable: true
    }, {
      name: 'CSS',
      category: 1,
      draggable: true
    }, {
      name: 'JavaScript',
      category: 1,
      draggable: true
    }, {
      name: 'TypeScript',
      category: 1,
      draggable: true
    }, {
      name: 'Java',
      category: 3,
      draggable: true
    }, {
      name: 'PHP',
      category: 3,
      draggable: true
    }, {
      name: 'Python',
      category: 3,
      draggable: true
    }, {
      name: 'Andriod',
      category: 2,
      draggable: true
    }, {
      name: 'Object-C',
      category: 2,
      draggable: true
    }, {
      name: 'Swift',
      category: 2,
      draggable: true
    }],
    links: [{
      source: 0,
      target: 1,
      value: ''
    }, {
      source: 0,
      target: 2,
      value: ''
    }, {
      source: 0,
      target: 3,
      value: ''
    }, {
      source: 1,
      target: 4,
      value: ''
    }, {
      source: 1,
      target: 5,
      value: ''
    }, {
      source: 1,
      target: 6,
      value: ''
    }, {
      source: 1,
      target: 7,
      value: ''
    }, {
      source: 6,
      target: 7,
      value: '超集'
    }, {
      source: 3,
      target: 8,
      value: ''
    }, {
      source: 3,
      target: 9,
      value: ''
    }, {
      source: 3,
      target: 10,
      value: ''
    }, {
      source: 9,
      target: 10,
      value: '脚本'
    }, {
      source: 2,
      target: 11,
      value: ''
    }, {
      source: 2,
      target: 12,
      value: ''
    }, {
      source: 2,
      target: 13,
      value: ''
    }, {
      source: 12,
      target: 13,
      value: 'iOS'
    }],
    lineStyle: {
      normal: {
        opacity: 0.9,
        width: 1,
        curveness: 0
      }
    }
  }]
};
relationChart.setOption(relationOpt);
```

--------------------------------

### Initialize ECharts CSRC Industry Pie Chart

Source: https://github.com/yyhsong/idatav/blob/master/case09/index.html

This snippet initializes an ECharts instance for a pie chart, displaying CSRC industry classification data. It configures tooltip, legend, and pie series properties. It then uses jQuery AJAX to fetch industry data from 'data/csrc-industry.json', transforms it into the required ECharts format, and updates the pie chart's data.

```JavaScript
const csrcChart = echarts.init(document.getElementById("csrcChart"), "shine");
const csrcChartOpt = {
  tooltip: { trigger: "item", formatter: "{b0}<br />股票数：{c0}<br />占比：{d0}%" },
  legend: { type: "scroll", orient: "vertical", padding: 0, top: 15, right: 0, itemGap: 5, itemWidth: 10, itemHeight: 10, textStyle: { fontSize: 10, color: "#b0c2f9" } },
  series: [{ name: "CSRC行业分类", type: "pie", center: ["47%", "55%"], radius: ["30%", "85%"] }]
};
csrcChart.setOption(csrcChartOpt);
$.ajax({
  url: "data/csrc-industry.json",
  dataType: "json"
}).done(function() {
  $("#csrcChart").addClass("chart-done");
}).done(function(data) {
  const chartData = [];
  for(let i in data) {
    chartData.push({ name: data[i].alias, value: data[i].stock });
  }
  csrcChart.setOption({
    series: [{ name: "CSRC行业分类", data: chartData }]
  });
}).fail(function(jqXHR) {
  console.log("Ajax Fail: ", jqXHR.status, jqXHR.statusText);
});
```

--------------------------------

### Initialize and Configure ECharts County Map (Kunshan)

Source: https://github.com/yyhsong/idatav/blob/master/case01/index.html

This snippet initializes an ECharts instance for a specific county map, using '昆山市' (Kunshan) as the map type. It configures geographic properties, disables roaming, sets zoom, and defines visual styles for map areas and labels, assuming an element with ID 'countyMap' exists.

```javascript
const countyMap = echarts.init(document.getElementById("countyMap"));
const countyMapOpt = {
  geo: {
    map: '昆山市',
    roam: false, //开启鼠标缩放和漫游
    zoom: 1, //地图缩放级别
    selectedMode: false, //选中模式：single | multiple
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    layoutCenter: ['50%', '50%'], //设置后left/right/top/bottom等属性无效
    layoutSize: '100%', //保持地图宽高比
    label: { emphasis: { show: true, color: '#f19000' } },
    itemStyle: {
      normal: { areaColor: '#101f32', borderWidth: 1.1, borderColor: '#43d0d6' },
      emphasis: { areaColor: '#069' }
    }
  }
};
countyMap.setOption(countyMapOpt);
```

--------------------------------

### Initialize and Configure ECharts World Map

Source: https://github.com/yyhsong/idatav/blob/master/case01/index.html

This snippet initializes an ECharts instance for a world map, configuring its basic geographic properties such as map type, roaming, zoom level, and visual styles. It sets the map to display the entire world, assuming an element with ID 'worldMap' exists.

```javascript
const worldMap = echarts.init(document.getElementById("worldMap"));
const worldMapOpt = {
  geo: {
    map: 'world',
    roam: false, //开启鼠标缩放和漫游
    zoom: 1, //地图缩放级别
    selectedMode: false, //选中模式：single | multiple
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    layoutCenter: ['50%', '50%'], //设置后left/right/top/bottom等属性无效
    layoutSize: '100%',
    label: { emphasis: { show: false } },
    itemStyle: {
      normal: { areaColor: '#101f32', borderWidth: 1.1, borderColor: '#43d0d6' },
      emphasis: { areaColor: '#069' }
    }
  }
};
worldMap.setOption(worldMapOpt);
```

--------------------------------

### Initialize ECharts Trend Chart with Dynamic Data Loading

Source: https://github.com/yyhsong/idatav/blob/master/case09/index.html

This snippet initializes an ECharts instance for a trend chart, configuring two pictorial bar series ('市价总值', '成交总额') and one line series ('平均市盈率'). It uses jQuery AJAX to fetch monthly data from 'data/month-count.json', processes it, and updates the chart's xAxis and series data. It includes conditional coloring and mark points/lines for data analysis.

```JavaScript
const trendChart = echarts.init(document.getElementById("trendChart"), "shine");
const trendChartOpt = {
  tooltip: { trigger: "axis" },
  legend: { data: ["市价总值", "成交总额", "平均市盈率"] },
  xAxis: { type: "category", axisTick: { show: false } },
  yAxis: [
    { type: "value", name: "亿元", min: 0, max: 20000, interval: 5000 },
    { type: "value", name: "倍", min: 0, max: 100, interval: 25 }
  ],
  visualMap: { show: false, dimension: 0, pieces: [{ gt: 0, lte: 8, color: "rgba(176, 58, 91, 1)" }, { gt: 9, lte: 11, color: "rgba(176, 58, 91, 0.5)" }] },
  series: [
    { name: "市价总值", type: "pictorialBar", symbol: 'path://d="M150 50 L130 130 L170 130 Z"', barCategoryGap: "40%", itemStyle: { color: function(params) { if(params.dataIndex >= 10) { return "rgba(119, 96, 246, 0.5)"; } return "rgba(119, 96, 246, 1)"; } }, markPoint: { itemStyle: { color: "rgba(119, 96, 246, 1)" }, data: [{ name: "最大值", type: "max" }] }, markLine: { lineStyle: { color: "rgba(119, 96, 246, 1)" }, label: { position: "middle", formatter: "月度平均市价总值：{c}亿元" }, data: [{ name: "平均值", type: "average" }] } },
    { name: "成交总额", type: "pictorialBar", symbol: 'path://d="M150 50 L130 130 L170 130 Z"', barCategoryGap: "40%", itemStyle: { color: function(params) { if(params.dataIndex >= 10) { return "rgba(230, 182, 0, 0.5)"; } return "rgba(230, 182, 0, 1)"; } }, markPoint: { itemStyle: { color: "rgba(230, 182, 0, 1)" }, data: [{ name: "最大值", type: "max" }] }, markLine: { lineStyle: { color: "rgba(230, 182, 0, 1)" }, label: { position: "middle", formatter: "月度平均成交总额：{c}亿元" }, data: [{ name: "平均值", type: "average" }] } },
    { name: "平均市盈率", type: "line", yAxisIndex: 1 }
  ]
};
trendChart.setOption(trendChartOpt);
$.ajax({
  url: "data/month-count.json",
  dataType: "json"
}).done(function() {
  $("#trendChart").addClass("chart-done");
}).done(function(data) {
  const xData = [];
  const yData1 = [];
  const yData2 = [];
  const yData3 = [];
  for(let i in data) {
    xData.push(data[i].month);
    yData1.push(data[i].sh_market_capitalization);
    yData2.push(data[i].sh_transaction_amount);
    yData3.push(data[i].sh_pe_ratio);
  }
  trendChart.setOption({
    xAxis: { data: xData },
    series: [
      { name: "市价总值", data: yData1 },
      { name: "成交总额", data: yData2 },
      { name: "平均市盈率", data: yData3 }
    ]
  });
}).fail(function(jqXHR) {
  console.log("Ajax Fail: ", jqXHR.status, jqXHR.statusText);
});
```

--------------------------------

### Initialize and Configure ECharts Province Map (Jiangsu)

Source: https://github.com/yyhsong/idatav/blob/master/case01/index.html

This snippet initializes an ECharts instance for a specific province map, using '江苏' (Jiangsu) as the map type. It configures geographic properties, disables roaming, sets zoom, and defines visual styles for map areas and labels, assuming an element with ID 'provinceMap' exists.

```javascript
const provinceMap = echarts.init(document.getElementById("provinceMap"));
const provinceMapOpt = {
  geo: {
    map: '江苏',
    roam: false, //开启鼠标缩放和漫游
    zoom: 1, //地图缩放级别
    selectedMode: false, //选中模式：single | multiple
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    layoutCenter: ['50%', '50%'], //设置后left/right/top/bottom等属性无效
    layoutSize: '100%', //保持地图宽高比
    label: { emphasis: { show: true, color: '#f19000' } },
    itemStyle: {
      normal: { areaColor: '#101f32', borderWidth: 1.1, borderColor: '#43d0d6' },
      emphasis: { areaColor: '#069' }
    }
  }
};
provinceMap.setOption(provinceMapOpt);
```

--------------------------------

### Resize ECharts Charts on Window Resize

Source: https://github.com/yyhsong/idatav/blob/master/case04/index.html

This JavaScript snippet sets up an event listener for the browser's window resize event. When the window size changes, it calls the `resize()` method on multiple ECharts instances (wordChart, ballChart, relationChart, fireworksChart, mapChart) to ensure they adapt to the new dimensions, maintaining responsiveness.

```JavaScript
window.onresize = function() {
    wordChart.resize();
    ballChart.resize();
    relationChart.resize();
    fireworksChart.resize();
    mapChart.resize();
};
```

--------------------------------

### Initialize and Configure ECharts City Map (Suzhou)

Source: https://github.com/yyhsong/idatav/blob/master/case01/index.html

This snippet initializes an ECharts instance for a specific city map, using '苏州' (Suzhou) as the map type. It configures geographic properties, disables roaming, sets zoom, and defines visual styles for map areas and labels, assuming an element with ID 'cityMap' exists.

```javascript
const cityMap = echarts.init(document.getElementById("cityMap"));
const cityMapOpt = {
  geo: {
    map: '苏州',
    roam: false, //开启鼠标缩放和漫游
    zoom: 1, //地图缩放级别
    selectedMode: false, //选中模式：single | multiple
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    layoutCenter: ['50%', '50%'], //设置后left/right/top/bottom等属性无效
    layoutSize: '100%', //保持地图宽高比
    label: { emphasis: { show: true, color: '#f19000' } },
    itemStyle: {
      normal: { areaColor: '#101f32', borderWidth: 1.1, borderColor: '#43d0d6' },
      emphasis: { areaColor: '#069' }
    }
  }
};
cityMap.setOption(cityMapOpt);
```

--------------------------------

### Resize ECharts Instances on Window Resize

Source: https://github.com/yyhsong/idatav/blob/master/case09/index.html

This snippet attaches a 'resize' event listener to the browser window. When the window size changes, it calls the 'resize()' method on all initialized ECharts instances (rankChart, mapChart, trendChart, csrcChart) to ensure they adapt to the new dimensions, maintaining responsiveness.

```JavaScript
$(window).resize(function() {
  rankChart.resize();
  mapChart.resize();
  trendChart.resize();
  csrcChart.resize();
});
```

--------------------------------

### Initialize and Configure ECharts Line Chart for Monthly Trends

Source: https://github.com/yyhsong/idatav/blob/master/case09/index.html

This JavaScript code initializes an ECharts instance for a line chart, designed to display monthly stock trends including market value, total turnover, and average P/E ratio. It features dual Y-axes for different data scales, custom axis labels, and a legend. Note: The provided code for this snippet is truncated.

```JavaScript
const trendChart = echarts.init(document.getElementById("trendChart"), "shine");
const trendChartOpt = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "none"
    }
  },
  legend: {
    left: "center",
    bottom: 3,
    itemWidth: 15,
    itemHeight: 10,
    textStyle: {
      fontSize: 12,
      color: "#b0c2f9"
    },
    data: ["市价总值", "成交总额", "平均市盈率"]
  },
  grid: {
    top: 40,
    bottom: 50,
    left: 60,
    right: 60
  },
  xAxis: {
    type: "category",
    axisLine: { lineStyle: {color: "#b0c2f9"} },
    axisTick: {show: false},
    axisLabel: {
      fontSize: 12,
      color: "#b0c2f9"
    }
  },
  yAxis: [{
    name: "金额",
    type: "value",
    splitNumber: 5,
    axisLine: { lineStyle: {color: "#b0c2f9"} },
    splitLine: {show: false},
    axisTick: {color: "#b0c2f9"},
    axisLabel: {
      fontSize: 12,
      color: "#b0c2f9",
      formatter: (value, index) => {
        return parseInt(value / 10000) + "万亿";
      }
    }
  }, {
    name: "市盈率",
    type: "value",
    splitNumber: 5,
    maxInterval: 5,
    minInterval: 5,
    interval: 5,
    axisLine: { lineStyle: {color: "#b0c2f9"} },
    splitLine: {show: false},
    axisTick: {color: "#b0c2f9"},
    axisLabel: {
      fontSize: 12,
      color: "#b0c2f9"
    }
  }],
  visualMap: {
    show: false,
    seriesIndex: 2,
    dimension: 0,
    pieces: [{
      lte: 9,
      color: "rgba(176, 58, 91, 1)"
    }, {
      gt
```
Tokens:
Raw