ECharts入门教程（基础详细）

ECharts入门教程（基础详细）

引用

CSDN

1.

https://m.blog.csdn.net/qq_62541773/article/details/145587724

一、关于ECharts

ECharts是一个使用JavaScript实现的开源可视化库，可以流畅地运行在PC和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等）。底层依赖矢量图形库ZRender，提供直观、交互丰富、可高度个性化定制的数据可视化图表。

ECharts提供了丰富的图表类型，包括折线图、柱状图、散点图、饼图、K线图、盒形图、地图、热力图、线图、关系图、treemap、旭日图、平行坐标图、漏斗图和仪表盘等，并支持图与图之间的混搭。

二、ECharts的使用

1. 安装 ECharts

你可以使用如下命令通过npm安装ECharts：

npm install echarts --save

或者

yarn add echarts

2. 引入ECharts

import * as echarts from 'echarts';

3. 创建DOM容器

在Vue组件的模板部分，创建一个用于放置ECharts图表的DOM容器。例如：

<template>
  <div ref="chart" style="width: 600px; height: 400px;"></div>
</template>

4. 初始化ECharts实例

在Vue组件的mounted生命周期钩子中，初始化ECharts实例。例如：

<script>
import { onMounted, shallowRef } from 'vue';
import * as echarts from 'echarts';

export default {
  setup() {
    const chart = shallowRef(null);
    let myChart = null;

    onMounted(() => {
      myChart = echarts.init(chart.value);
      // 配置图表
      const option = {
        title: {
          text: 'ECharts 示例'
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      };
      // 使用配置项和数据显示图表
      myChart.setOption(option);
    });

    return { chart, myChart };
  }
};
</script>

三、ECharts的重点配置介绍

1. 标题配置title

title: {
  text: '图表标题',
  subtext: '副标题',
  left: 'center', // 标题位置
  // 主标题文本超链接
  link: 'https://echarts.apache.org/zh/option.html#title',
  // 指定窗口打开主标题超链接
  // 'self' 当前窗口打开,'blank' 新窗口打开
  target: 'blank',
  width: '20px',
  height: '20px'
}

2. 工具提示配置tooltip

tooltip: {
  trigger: "item",
},

• show：是否显示提示框组件。
• trigger：触发类型。可选：
• item：数据项图形触发，主要在散点图、饼图等无类目轴的图表中使用。
• axis：坐标轴触发，主要在柱状图、折线图等会使用类目轴的图表中使用。
• none：什么都不触发。

3. 坐标轴配置xAxis和yAxis

xAxis: {
  type: "category",
  data: [0, 1, 2, 3, 4, 5, 6],
},
yAxis: {
  type: "value",
  min: 0,
  max: 6,
},

• type：坐标轴类型，可以是category（类目轴，适用于离散的类目数据）、value（数值轴，适用于连续数值数据）、time（时间轴，适用于时间数据）或log（对数轴）。
• position：坐标轴的位置，可以是top或bottom。
• data：类目数据，仅在类目轴（type: 'category'）中有效。
• min、max：坐标轴刻度的最小值和最大值。

4. 数据系列配置series

series: [
  {
    name: 'aa',
    data: [90, 20, 10, 8, 40, 77, 10],
    type: 'bar'
  },
  {
    name: 'bb',
    data: [20, 9, 50, 60, 90, 11, 30],
    type: 'bar'
  },
  {
    name: 'cc',
    data: [100, 70, 70, 88, 7, 10, 13],
    type: 'bar'
  },
]

• name：系列名称，用于tooltip的显示，legend的图例筛选。
• type：图表类型，折线图line，柱状图bar，饼图pie，散点（气泡）图scatter。

5. 图例组件legend

当图例数量过多时，可以使用滚动图例（垂直）或滚动图例（水平）。

legend: {
  orient: "vertical",
  type: "scroll",
  top: "10%",
  right: 0,
  height: "400px",
  // 图例长度大于15则后面字符省略为...
  formatter: function (name) {
    var maxLength = 15;
    if (name.length > maxLength) {
      return name.substring(0, maxLength) + "...";
    } else {
      return name;
    }
  },
}

• type：图例的类型。可选值：
• plain：普通图例。缺省就是普通图例。
• scroll：可滚动翻页的图例。当图例数量较多时可以使用。
• orient：图例列表的布局朝向。可选：
• horizontal
• vertical
• padding：图例内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。
• formatter：用来格式化图例文本，支持字符串模板和回调函数两种形式。

6. 直角坐标系内绘图网格grid（可控制图表的位置）

grid: {
  left: "5%",
  right: "15%",
  bottom: '10%',
  containLabel: true,
},

• left：grid组件离容器左侧的距离。left的值可以是像20这样的具体像素值，可以是像'20%'这样相对于容器高宽的百分比，也可以是'left'、'center'、'right'。如果left的值为'left'、'center'、'right'，组件会根据相应的位置自动对齐。
• width：grid组件的宽度。默认自适应。
• height：grid组件的高度。默认自适应。
• containLabel：用于控制网格（grid）是否包含坐标轴的标签。当设置为true时，网格会自动调整其尺寸以确保坐标轴的标签能够完全显示，而不会溢出容器或覆盖其他组件。

7. 区域缩放dataZoom

dataZoom支持这几种类型的dataZoom组件：

• 内置型数据区域缩放组件（dataZoomInside）：内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系。
• 滑动条型数据区域缩放组件（dataZoomSlider）：有单独的滑动条，用户在滑动条上进行缩放或漫游。
• 框选型数据区域缩放组件（dataZoomSelect）：提供一个选框进行数据区域缩放。即toolbox.feature.dataZoom，配置项在toolbox中。

dataZoom: [
  {
    type: 'slider',
    show: true,
    xAxisIndex: 0,
    start: 1,
    end: 35
  },
  {
    type: 'slider',
    show: true,
    yAxisIndex: 0,
    left: '93%',
    start: 29,
    end: 36
  },
  {
    type: 'inside',
    xAxisIndex: 0,
    start: 1,
    end: 35
  },
  {
    type: 'inside',
    yAxisIndex: 0,
    start: 29,
    end: 36
  }
],

dataZoom的数据窗口范围的设置，目前支持两种形式：

• 百分比形式：即设置dataZoom.start和dataZoom.end。

• 绝对数值形式：即设置dataZoom.startValue和dataZoom.endValue。

• type：类型，inside内置型，slider滑动条型。

• inside内置型配置：

• disabled：是否停止组件的功能。

• xAxisIndex：设置dataZoom-inside组件控制的x轴。如果xAxis只有一个对象，填0即可。

• yAxisIndex：设置dataZoom-inside组件控制的y轴。如果yAxis只有一个对象，填0即可。

• slider内置型配置：

• show：是否显示组件。如果设置为false，不会显示，但是数据过滤的功能还存在。

8. 工具栏toolbox

toolbox: {
  right: 20,
  show: true,
  feature: {
    saveAsImage: {},
    dataZoom: {
      show: true,
      filterMode: "none",
    },
    restore: {},
    dataView: { readOnly: true },
    magicType: { type: ['line', 'bar'] },
    // 自定义工具
    myTool2: {
      show: true,
      title: '自定义扩展方法',
      icon: 'image://https://echarts.apache.org/zh/images/favicon.png',
      onclick: function () {
        alert('myToolHandler2')
      }
    }
  },
}

内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置五个工具。

• show：是否显示组件。
• orient：工具栏icon的布局朝向。可选：
• horizontal 水平，默认
• vertical 垂直
• itemSize：工具栏icon的大小。
• feature：各工具配置项。除了各个内置的工具按钮外，还可以自定义工具按钮。
• saveAsImage：保存为图片。
• restore：配置项还原。
• dataView：数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
• dataZoom：数据区域缩放。目前只支持直角坐标系的缩放。
• magicType：动态类型切换。如设置：type: ['line', 'bar', 'stack']

注意：自定义的工具名字，只能以my开头。如上示例

四、其他注意事项

1. 响应式处理

在实际项目中，图表需要根据窗口大小的变化进行自适应调整。可以通过监听窗口的resize事件，在窗口大小变化时调用ECharts实例的resize方法。

onMounted(() => {
  const myChart = echarts.init(chart.value);
  // 配置图表...
  window.addEventListener('resize', () => {
    myChart.resize();
  });
});

2. 动态更新数据

在实际应用中，可能需要根据用户操作或数据变化动态更新图表。可以通过调用ECharts实例的setOption方法，传入新的数据和配置项来更新图表。

const updateChartData = (newData) => {
  // 更新配置数据
  myChart.setOption({
    series: [{
      data: newData
    }]
  });
}

3. 全局挂载ECharts

在main.js中引入ECharts，并将其挂载到Vue的全局属性上。

import { createApp } from 'vue';
import App from './App.vue';
import * as echarts from 'echarts';

const app = createApp(App);
app.config.globalProperties.$echarts = echarts;
app.mount('#app');

4. 使用vue-echarts插件

安装并使用vue-echarts插件，该插件提供了Vue组件封装，使得在Vue中使用ECharts更加方便。

npm install vue-echarts --save

在main.js中引入并使用vue-echarts组件。

import { createApp } from 'vue';
import App from './App.vue';
import Echarts from 'vue-echarts';

const app = createApp(App);
app.component('e-charts', Echarts);
app.mount('#app');

然后，在组件中使用e-charts组件，并通过option属性传递图表配置项。

<template>
  <e-charts :option="chartOption" style="width: 600px; height: 400px;"></e-charts>
</template>
<script>
export default {
  data() {
    return {
      chartOption: {
        // 图表配置项
      }
    };
  }
};
</script>