3. ecahrts组件

2022-05-27 13:31:06 阅读：146 来源： 互联网

标签：name 缩放 chart encode ecahrts 组件 type

组件：echarts中除了绘图之外其它补分，都可以抽象为组件。如：xAxis（直角坐标系X轴），yAxis（直角坐标系Y轴），grid（直角坐标系地板），angleAxis（极坐标系）。。。。一些列在setoption时，与series层级并列的设置

<!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: {},
          magicType: {
            type: ['stack', 'line', 'bar'],
            show: true
          }
        }
      },
      // 缩放尺
      dataZoom: [{
        show: true,
        start: 30,
        end: 70
      }],
      series: [{
        // series里的name与legend需要匹配才能显示图例
        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>

标签：name,缩放,chart,encode,ecahrts,组件,type
来源： https://www.cnblogs.com/JianXin1994/p/16317261.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

3. ecahrts组件