用VUE框架 写一个eCharts图表

下载插件

npm install echarts --save

引入我们的 eCharts 

我们也可以再官网上看到eCharts的下载 和引入方式

ECharts的基础配置
在官网给出了我们许多示例：链接

 我们都可以直接拿来用，但是里面的一些配置我们可以根据自己的需求来修改，所以我们需要了解ECharts的基础配置。

主要配置（常用的）
官网配置项参考文档：链接

需要了解的主要配置：series  xAxis yAxis grid tooltip title legend color

• series
• 系列列表。每个系列通过 type 决定自己的图表类型
• 通俗的理解：图标数据，指定什么类型的图标，可以多个图表重叠。
• xAxis：直角坐标系 grid 中的 x 轴
• – boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
• yAxis：直角坐标系 grid 中的 y 轴
• grid：直角坐标系内绘图网格。
• title：标题组件
• tooltip：提示框组件
• legend：图例组件
• color：调色盘颜色列表
• stack：数据堆叠，同个类目轴上系列配置相同的stack值后 后一个系列的值会在前一个系列的值上相加。

 关于更多的配置项参考官方文档，十分具体。

在vue2和3中 都得放在 mounted onMounted 里面才会生效 （刚开始自己弄了好长时间才好） 

<template>
  <div>
    <!-- 准备好一个盒子必须有宽高这里的id 必须和下面获取的节点一致 -->
    <div id="main" style="width: 100%; height: 500px"></div>
  </div>
</template>
 
<script>
// 引入eCharts文件
import * as echarts from "echarts";
 
import { ref, toRefs, reactive, onMounted } from "vue";
 
export default {
 
  setup(props) {
 
    onMounted(() => {
      // 初始化实例对象 echarts.init(dom容器)
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;
       // 指定配置项
      option = {
        // 设置标题的内容
        title: {
          text: "用户来源",
        },
        // 图表的提示框组件
        tooltip: {
        // 触发的方式 坐标轴
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        // 图例组件
        legend: {
        //series有name了，这里的data可以删除掉
          data: ["华东", "华南", "华北", "西部", "其他"],
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        // 网格设置 grid 可以控制 线形图 柱状图 图标大小
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
           // 是否显示刻度标签
          containLabel: true,
        },
        //  设置x轴的相关配置
        xAxis: [
          {
            type: "category",
            // 线条和y轴是否有缝隙
            boundaryGap: false,
            data: obj.xlist,
          },
        ],
        // 设置x轴的相关配置
        yAxis: [
          {
            type: "value",
          },
        ],
        // 系统图表配置，决定显示哪种类型的图表
        series: [
          {
            name: "华东",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "华南",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "华北",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [150, 232, 201, 154, 190, 330, 410],
          },
          {
            name: "西部",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [320, 332, 301, 334, 390, 330, 320],
          },
          {
            name: "其他",
            type: "line",
            stack: "Total",
            label: {
              show: true,
              position: "top",
            },
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [820, 932, 901, 934, 1290, 1330, 1320],
          },
        ],
      };
      
      option && myChart.setOption(option);
     
    });
 
  },
};
</script>