通用配置

任何图表都能使用的配置

• 数据集: dataset
• 标题: title
• 提示: tooltip
• 工具按钮: toolbox
• 图例: legend

1. dataset

说明：

• 数据集（dataset）是专门用来管理数据的组件
• 从 ECharts4 起，开始支持

配置：

• 旧的方式

  const records = [
    { id: 1, name: '张三', chinese: 90 },
    { id: 2, name: '李四', chinese: 62 },
    { id: 3, name: '王五', chinese: 85 },
  ];
  
  const categories = records.map((item) => item.name);
  const values = records.map((item) => item.chinese);
  
  myCharts.setOption({
    // 类目轴
    xAxis: {
      type: 'category', 
      data: categories, // ['张三', '李四', '王五'] 
    },
    
    // 数值轴
    yAxis: { type: 'value' },
  
    // 给数值轴设置数据
    series: [ 
      {
        name: '语文',
        type: 'bar',
        data: values, // [ 90, 62, 85 ] 
      }
    ]
  });
  

• 新的方式

  const records = [
    { id: 1, name: '张三', chinese: 90 },
    { id: 2, name: '李四', chinese: 62 },
    { id: 3, name: '王五', chinese: 85 },
  ];
  
  myCharts.setOption({
    dataset: {
      dimensions: ['name', 'chinese'],
      source: records,
    },
  
    // 声明 X 轴, 类目轴
    xAxis: { type: 'category' },
    
    // 声明 Y 轴, 数值轴
    yAxis: { type: 'value' },
  
    series: [ 
      {
        name: '语文',
        type: 'bar',
  
        // 直角坐标系
        encode: { x: 'name', y: 'chinese' }
      }
    ]
  });
  

2. title

说明：

• 标题组件，包含主标题和副标题。

配置：

option = {
  title: {
    text: '成绩统计表',
    textStyle: {
      color: 'blue',
    },
    
    borderWidth: 4,
    borderColor: 'blue',
    borderRadius: 4,
    
    top: 10,
    left: 20
  }
}

示例：

<!--07-common-config-title.html-->
<div id="box_07-common-config-title" style="width: 600px; height: 400px;"></div>
<script>
  echarts.init(document.querySelector('#box_07-common-config-title')).setOption({
    dataset: {
      dimensions: ['name', 'chinese', 'math'],
      source: [
        { name: '张三', chinese: 60, math: 90 },
        { name: '李四', chinese: 70, math: 80 },
        { name: '王五', chinese: 80, math: 70 },
        { name: '赵六', chinese: 90, math: 60 },
      ],
    },
    title: {
      text: '成绩统计表',
      textStyle: {
        color: 'blue',
      },
      borderWidth: 4,
      borderColor: 'blue',
      borderRadius: 4,
      top: 10,
      left: 20
    },
    xAxis: {
      type: 'category',
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '语文',
        type: 'bar',
        encode: {
          x: 'name',
          y: 'chinese',
        }
      },
    ]
  });
</script>

3. tooltip

说明：

• 提示框组件，用于配置鼠标滑过或点击图表时的显示框

配置：

option = {
  tooltip: {
    trigger: 'item', // `axis`: 类目轴 内触发 
    triggerOn: 'click', // `mousemove` `click`
    formatter(params) { // 字符串模板：对于 dataset 是存在问题的
      const {
        seriesName,
        name,
      } = params;
      const value = params.value[params.dimensionNames[params.encode.y[0]]];
      console.log(params);
      return `${name} 的 ${seriesName} 成绩是 ${value}`;
    }
  },
}

示例：

<!--08-common-config-tooltip.html-->
<div id="box_08-common-config-tooltip" style="width: 600px; height: 400px;"></div>
<script>
  echarts.init(document.querySelector('#box_08-common-config-tooltip')).setOption({
    dataset: {
      dimensions: ['name', 'chinese', 'math'],
      source: [
        { name: '张三', chinese: 60, math: 90 },
        { name: '李四', chinese: 70, math: 80 },
        { name: '王五', chinese: 80, math: 70 },
        { name: '赵六', chinese: 90, math: 60 },
      ],
    },
    tooltip: {
      trigger: 'item', // 'item' | 'axis'
      triggerOn: 'click', // 'mousemove' | 'click'
      formatter(params) {
        const {
          seriesName,
          name,
        } = params;
        const value = params.value[params.dimensionNames[params.encode.y[0]]];
        console.log(params);
        return `${name} 的 ${seriesName} 成绩是 ${value}`;
      }
    },
    xAxis: {
      type: 'category',
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '语文',
        type: 'bar',
        encode: {
          x: 'name',
          y: 'chinese',
          tooltip: 'chinese',
        }
      },
    ]
  });
</script>

4. toolbox

说明：

• ECharts 提供的工具栏

配置：

option = {
  toolbox: {
    feature: {
      saveAsImage: {},
      dataView: {}, // 可编辑
      magicType: {
        type: ['bar', 'line'],
      },
      dataZoom: {},
      restore: {},
    }
  },
}

4.1. 示例

<!--09-common-config-toolbox.html-->
<div id="box_09-common-config-toolbox" style="width: 600px; height: 400px;"></div>
<script>
  echarts.init(document.querySelector('#box_09-common-config-toolbox')).setOption({
    dataset: {
      dimensions: ['name', 'chinese', 'math'],
      source: [
        { name: '张三', chinese: 60, math: 90 },
        { name: '李四', chinese: 70, math: 80 },
        { name: '王五', chinese: 80, math: 70 },
        { name: '赵六', chinese: 90, math: 60 },
      ],
    },
    toolbox: {
      feature: {
        saveAsImage: {},
        dataView: {},
        magicType: {
          type: ['bar', 'line'],
        },
        dataZoom: {},
        restore: {},
      }
    },
    xAxis: {
      type: 'category',
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '语文',
        type: 'bar',
        encode: {
          x: 'name',
          y: 'chinese',
          tooltip: 'chinese',
        }
      },
    ]
  });
</script>

5. legend

说明：

• 图例组件
• 标记系列：不同的系列有不同的颜色
• 筛选系列

配置：

option = {
  legend: {
    data: ['${series[0].name}', '${series[1].name}', ,,,]
  }
}

示例：

<!--10-common-config-legend.html-->
<div id="box_10-common-config-legend" style="width: 600px; height: 400px;"></div>
<script>
  echarts.init(document.querySelector('#box_10-common-config-legend')).setOption({
    dataset: {
      dimensions: ['name', 'chinese', 'math'],
      source: [
        { name: '张三', chinese: 60, math: 90 },
        { name: '李四', chinese: 70, math: 80 },
        { name: '王五', chinese: 80, math: 70 },
        { name: '赵六', chinese: 90, math: 60 },
      ],
    },
    legend: {
      data: [ '语文', '数学' ]
    },
    xAxis: {
      type: 'category',
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '语文',
        type: 'bar',
        encode: {
          x: 'name',
          y: 'chinese',
        }
      },
      {
        name: '数学',
        type: 'bar',
        encode: {
          x: 'name',
          y: 'math',
        }
      },
    ]
  });
</script>