前言

最近学了一下echarts,echarts的官方文档中的配置项,又多又杂,然后我当时也没找到什么好的资料,在自己尝试之后,然后也有一些心得体会,决定把一些常用的归纳一下,帮助想要快速上手echarts的朋友

echarts在vue中的快速使用

基本流程

1:引入echarts核心库

2：准备一个容器【宽度高度】

3：初始化echarts实例，与初始化图表展示的数据

下面我们进入流程

echarts的安装

直接用npm包管理工具,用其他的也是差不多的

npm install echarts

echarts的导入

安装好了之后,就在你想要使用的vue文件里面导入,也就是引入echarts核心库

import * as echarts from 'echarts'

准备一个容器

然后,我们还需要准备一个有高度宽度的容器

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

初始化实例,设置实例的配置,基本使用完成

接下来就是初始化实例,设置echarts实例的配置项,我们在onMounted函数里面进行初始化

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

export default {
  name: 'LineChart',
  setup() {
    const chart = ref(null);

    onMounted(() => {
        //创建一个实例
      const myChart = echarts.init(chart.value);
       
       //创建配置
      const option = {
        title:{   //设置标题用的
            text:'言志志的第一个echarts实例'
        },
        tooptip:{},  //用于设置鼠标悬停在图表上时显示的提示框。
        legend:{    // 用于设置图例，即数据系列的名称标识。
            data:['人数']
        },
        xAxis:{   //设置x轴
            data:['Vue2','Vue3','React','HTML']
        },
        yAxis:{
            //设置y轴,一般不适用,因为echarts做了数据自动跟踪,会自动生成y轴,可以为空,但不能少
        },
        series:[    //定义图表的格式和设置图表的数据的,数组,然后可以配置多个,就可以在一张图上展示多种类型的表
            {
                name:'人数',   
                type:'bar',  //设置类型的,根据这个不同,就可以有很多效果,后面介绍,bar的话,是条形图
                data:[2000,2300,1800,5000]  //展示的数据,这个要和x轴的要一一对应
            }
        ]
    }
       
       // 实例使用配置
      myChart.setOption(option);
    });

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

到这里,你就已经可以做完一个简单的图了,接下来,我将用最快的时间,教会你其他类型的图

通过series配置画常用的图

画其他图的关键就是series配置项,如果你认真看了上面我的代码的注释的话,你会知道series是数组类型的,可以用来在一张图里面展示多种类型的表, 下面是一些常用的series配置和用法的详细介绍：

1. 折线图（Line Chart）：

series: [
  {
    name: '温度',
    type: 'line',
    data: [20, 23, 25, 22, 21], // 温度数据
  },
  {
    name: '湿度',
    type: 'line',
    data: [50, 45, 55, 60, 58], // 湿度数据
  },
]

在折线图中，每个数据系列都通过一个对象表示，其中name表示系列的名称，type表示系列的类型为折线图，data表示系列的数据。

2. 柱状图（Bar Chart）：

series: [
  {
    name: '销量',
    type: 'bar',
    data: [100, 200, 150, 300, 250], // 销量数据
  },
]

柱状图的配置与折线图类似，只是将type设置为bar表示柱状图。

3. 饼图（Pie Chart）：

series: [
  {
    name: '访问来源',
    type: 'pie',
    radius: '50%',
    data: [
      { value: 335, name: '直接访问' },
      { value: 310, name: '邮件营销' },
      { value: 234, name: '联盟广告' },
      { value: 135, name: '视频广告' },
      { value: 1548, name: '搜索引擎' },
    ],
  },
]

饼图中的每个数据项都通过一个对象表示，其中value表示数据的值，name表示数据的名称。

4. 散点图（Scatter Chart）：

series: [
  {
    name: '散点',
    type: 'scatter',
    data: [
      [10, 20],
      [30, 40],
      [50, 60],
      [70, 80],
    ], // 散点数据
  },
]

散点图中的每个数据项都通过一个数组表示，其中第一个元素表示x轴的值，第二个元素表示y轴的值。

如果不是专业开发可视化面板的,其实会上面的三种就差不多了,下面再详细介绍一下常用的配置项

常用的配置项

1. title：用于设置图表的标题。

title: {
  text: '图表标题',
  subtext: '副标题',
}

2. tooltip：用于设置鼠标悬停在图表上时显示的提示框。

tooltip: {
  trigger: 'axis', // 触发类型，可以是'axis'（坐标轴触发）或 'item'（数据项触发）
  formatter: '{b} <br/> {a}: {c}', // 提示框内容的格式化字符串
}

3. legend：用于设置图例，即数据系列的名称标识。

legend: {
  data: ['温度', '湿度'], // 图例的名称
}

4. xAxis和yAxis：分别用于设置x轴和y轴的配置。

xAxis: {
  type: 'category', // x轴类型，可以是'category'（类目轴）或'value'（数值轴）
  data: ['周一', '周二', '周三', '周四', '周五'], // x轴的数据
}

yAxis: {
  type: 'value', // y轴类型，可以是'value'（数值轴）或'category'（类目轴）
}

5. grid：用于设置图表的网格配置，包括位置、大小和间距等。

grid: {
  left: '10%', // 网格左侧的偏移量
  right: '10%', // 网格右侧的偏移量
  bottom: '10%', // 网格底部的偏移量
  containLabel: true, // 是否包含坐标轴标签
}

6. toolbox：用于设置图表的工具箱，包括保存图表、刷新和数据视图等功能。

toolbox: {
  feature: {
    saveAsImage: {}, // 保存为图片
    restore: {}, // 刷新
    dataView: {}, // 数据视图
  },
}

看完这个文档,基本上就可以使用了,如果你还想深入的话,可以直接去官网看文档