2. echarts系列概念以及多系列

  • 系列series是指：一组数值映射成对应的图
  • dataset用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以自由指定数据到视觉的映射。这一特性将逻辑和数据分离，带来更好的复用，并易于理解
  • 多系列：多个图表公用一个坐标系

多系列

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.2/echarts.min.js"
    integrity="sha512-weWXHm0Ws2cZKjjwugRMnnOAx9uCP/wUVf84W7/fXQimwYUK28zPDGPprDozomQLpKv6U99xN9PI9+yLI9qxNw=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <style>
    #chart {
      width: 800px;
      height: 400px;
    }
  </style>
</head>

<body>
  <div id="chart"></div>
  <script>
    const chartDom = document.getElementById('chart');
    const chart = echarts.init(chartDom);
    chart.setOption({
      // dataset用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以自由指定数据到视觉的映射。
      dataset: {
        source: [
          ['一季度', 100, 79, '分类1', 50],
          ['二季度', 112, 81, '分类2', 60],
          ['三季度', 96, 88, '分类3', 55],
          ['四季度', 123, 72, '分类4', 70]
        ]
      },
      title: {
        text: 'ECharts 多系列案例',
        subtext: '慕课网数据可视化课程'
      },
      xAxis: {
        data: ['一季度', '二季度', '三季度', '四季度']
      },
      yAxis: {},
      legend: {
        data: [{
          name: '分类',
          icon: 'circle',
          textStyle: {
            color: 'red'
          }
        }, '折线图', '柱状图'],
        left: 300
      },
      grid: {
        top: 100,
        left: '10%',
        right: '10%',
        bottom: 100
      },
      toolbox: {
        feature: {
          saveAsImage: {},
          dataZoom: {
            yAxisIndex: false
          },
          restore: {}
        }
      },
      dataZoom: [{
        show: true,
        start: 30,
        end: 70
      }],
      series: [{
        name: '分类',
        type: 'pie',
        // 饼图使用center定位
        center: ['65%', 60],
        radius: 35,
        // 当我们使用了dataset设置了多系列的公共数据后，使用encode获取公共数据里面的数据来代替data
        encode: {
          itemName: 3,
          value: 4
        }
      }, {
        name: '折线图',
        type: 'line',
        encode: {
          x: 0,
          y: 1
        }
      }, {
        name: '柱状图',
        type: 'bar',
        encode: {
          x: 0,
          y: 2
        }
      }]
    });
  </script>
</body>

</html>
posted @ 2022-05-27 11:27  见信  阅读(310)  评论(0)    收藏  举报