通过echarts实现缩放柱状图

功能

通过echart图表中的js代码，使柱状图实现缩放

用法

1.1 新建表格

页面内新建任意数里的表格后

1.2 新增echart图表

将js代码复制到echart图表中

v1.2代码

  1. dataSet = dataSet.map((data, i) => dataSet.map(d => d[i]));
  2. var dataAxis = dataSet[0];
  3. var data = dataSet[1];;
  4. var yMax = 500;
  5. var dataShadow = [];
  6. for (var i = 0; i < data.length; i++) {
  7.    dataShadow.push(yMax);
  8. }
  9. option = {
  11. title: {
  12.     text: '特性示例：渐变色 阴影 点击缩放',
  13.     subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
  14. },
  15. xAxis: {
  16.     data: dataAxis,
  17.     axisLabel: {
  18.         inside: true,
  19.         textStyle: {
  20.             color: '#fff'
  21.         }
  22.     },
  23.     axisTick: {
  24.         show: false
  25.     },
  26.     axisLine: {
  27.         show: false
  28.     },
  29.     z: 10
  30. },
  31. yAxis: {
  32.     axisLine: {
  33.         show: false
  34.     },
  35.     axisTick: {
  36.         show: false
  37.     },
  38.     axisLabel: {
  39.         textStyle: {
  40.             color: '#999'
  41.         }
  42.     }
  43. },
  44. dataZoom: [
  45.     {
  46.         type: 'inside'
  47.     }
  48. ],
  49. series: [
  50.     {
  51.         type: 'bar',
  52.         showBackground: true,
  53.         itemStyle: {
  54.             color: new echarts.graphic.LinearGradient(
  55.                 0, 0, 0, 1,
  56.                 [
  57.                     {offset: 0, color: '#83bff6'},
  58.                     {offset: 0.5, color: '#188df0'},
  59.                     {offset: 1, color: '#188df0'}
  60.                 ]
  61.             )
  62.         },
  63.         emphasis: {
  64.             itemStyle: {
  65.                 color: new echarts.graphic.LinearGradient(
  66.                     0, 0, 0, 1,
  67.                     [
  68.                         {offset: 0, color: '#2378f7'},
  69.                         {offset: 0.7, color: '#2378f7'},
  70.                         {offset: 1, color: '#83bff6'}
  71.                     ]
  72.                 )
  73.             }
  74.         },
  75.         data: data
  76.     }
  77. ]
  78. };
  80. // Enable data zoom when user click bar.
  81. var zoomSize = 6;
  82. myChart.on('click', function (params) {
  83. console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
  84. myChart.dispatchAction({
  85.     type: 'dataZoom',
  86.     startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
  87.     endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
  88. });
  89. });