我们这里用

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>

Logo

前往低代码交流专区

更多推荐