Echarts custom data view (DataView)-button name-refresh method

Based on jquery3.1 & echarts.js;
For more details, please visit: https://www.echartsjs.com
First upload the renderings: gif is not recorded, you can copy the code yourself and go to the local
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>数据分析</title>
  <script src="../js/jquery-3.3.1.min.js"></script>
  <script src="../js/echarts.js"></script>
</head>
<body class="padding-top55" style="background-color: white">
      <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
      <div id="echart1" style="margin-top:100px;width: 100%;height: 500px"></div>
</body>
<script type="text/javascript">
  $(function() {
    createPic1();
  })

  /**
   * 刷新页面
   */
  function refresh() {
    location.reload();
  }

  function createPic1() {
    dateStr = ["2019-08-21","2019-08-22","2019-08-23","2019-08-24","2019-08-25","2019-08-26","2019-08-27","2019-08-28"];
    dataCount = [8,7,6,5,4,3,2,1];
    var totalCount1 = 0;
    var myChart = null;
    // 基于准备好的dom，初始化echarts实例
    myChart = echarts.init(document.getElementById('echart1'));
    //用于坐标轴X轴的单位
    var dates1 = [];
    for (var i = 0; i < dateStr.length; i++) {
      dates1[i] =  dateStr[i];
    }
    //用于线条的值
    var values1 = [];
    for (var i = 0; i < dataCount.length; i++) {
      values1[i] = dataCount[i];
    }
    option1 = {
      title: {
        text: '建卡量分析--时间分组',
        subtext: "时间段: " + "2019-08-21" + "~" + "2019-08-28",
        x: 'center'
      },
      tooltip: {
        trigger: 'axis'
      },
      toolbox: {
        left: 200,
        show: true,
        feature: {
          mark: {
            show: true
          },
          dataView: {
            show: true,
            readOnly: false,
            lang: ["数据视图", "关闭", "刷新"]  //数据视图内部的 标题 , 关闭按钮名字, 刷新按钮名字(这里刷新按钮的功能可通过 contentToOption进行自定义).
          },
          magicType: {
            show: true,
            type: ['line', 'bar']  //可以切换为 折线图, 柱状图
          },
          restore: {
            show: true
          },
          saveAsImage: {
            show: true
          }
        }
      },
      calculable: true,
      xAxis: [{
        type: 'category',
        data: dates1,
        axisLabel: {
          show: true,
          interval: 0,
          textStyle: {
            fontSize: 10 //更改坐标轴文字大小
          }
        }
      }],
      yAxis: [{
        type: 'value'
      }],
      dataZoom: [{
        type: 'inside'
      }],
      visualMap: {
        top: 30,  //上边距
        right: 30,//右边距
        pieces: [//柱状参数
            {
              gt: 0,  //范围最小值
              lte: 50,//范围最大值
              color: '#096'//颜色
            }, {
              gt: 50,
              lte: 100,
              color: '#ffde33'
            }, {
              gt: 100,
              lte: 150,
              color: '#ff9933'
            }, {
              gt: 150,
              lte: 200,
              color: '#cc0033'
            }, {
              gt: 200,
              lte: 300,
              color: '#660099'
            }, {
              gt: 300,
              color: '#7e0023'
            }
        ],
        outOfRange: { //超过范围区间的
          color: '#999'
        }
      },
      series: [{  //每个柱状的内部参数
        name: '建卡量',
        type: 'bar', //代表柱状图 , line折线图 , pie饼图
        data: values1,  //可以把 数据集合 放进去,echarts会根据传入的集合自动生成
        markPoint: {
          data: [{
              type: 'max',
              name: '最大值'
            },
            {
              type: 'min',
              name: '最小值'
            }
          ]
        },
        markLine: { //均值线
          data: [{
            type: 'average',
            name: '平均值'
          }]
        }
      }],
      optionToContent: function(opt) { //设置数据视图的样式
        var axisData = opt.xAxis[0].data;
        var series = opt.series;
        var table = '<table style="width:100%;text-align:left" cellspacing="0" cellpadding="0" class="table_Qushi"><tbody><tr>' +
          '<th>时间</th>';

        for (var i = 0; i < series.length; i++) {
          table += '<th>' + series[i].name + '</th>';
        }

        table += '</tr>';
        for (var i = 0, l = axisData.length; i < l; i++) {
          table += '<tr>' +
            '<td>' + axisData[i] + '</td>' +
            '<td>' + series[0].data[i] + '</td>' +
            '</tr>';
        }
        table += '</tbody></table>';
        return table;
      },
      contentToOption: function() {// 数据视图刷新的方法
        refresh();
      }
    };
    myChart.setOption(option1); // 使用刚指定的配置项和数据显示图表。
  }

</script>

</html>
ChyoD1811
Published 22 original articles · Like 3 · Visitor 3442
Private letter concerns
Echarts custom data view (DataView)-button name-refresh method

Guess you like
