echarts 折线图 设置y轴最小刻度_vue中引入echarts及基础配置详解

一、vue引入echarts的步骤

第一步：下载echarts文件

npm install echarts

第二步：在script中引入echarts

import echarts from "echarts";

第三步：准备一个具备大小的DOM容器

<

第四步：初始化echarts实例对象

mounted

第五步：指定配置项和数据（options)

mounted

第六步：将配置项设置给echarts实例对象

mounted

二、echarts基础配置

- title：标题组件

- tooltip：提示框组件

- legend：图例组件     series里面有了name值就可以删除legend的data

- toolbox 工具箱组件，可以保存图片等功能

  

- grid： 网格配置，可以控制线形图、柱状图、图标的大小。

  - containLabel：true  是否显示刻度标签

- xAxis：直角坐标系 grid 中的 x 轴

  - boundaryGap: 坐标轴两边留白策略
- yAxis：直角坐标系 grid 中的 y 轴

  

- series

  - 系列图标配置。每个系列通过 `type` 决定自己的图表类型
  - 大白话：图标数据，指定什么类型的图标，可以多个图表重叠。

- color：调色盘颜色列表，color设置我们线条的颜色 注意后面是个数组

详细参阅配置文件:

Documentation - Apache ECharts(incubating)​echarts.apache.org

三、参考demo（柱状图）

• dom

<div class="panel bar">
  <h2>柱形图—就业行业</h2>
  <div class="chart box"></div>
  <div class="panel-footer"></div>
</div>

• echarts配置

mounted() {
    // 实例化对象
    let myChart = echarts.init(document.querySelector(".bar .chart"));
    // 指定配置和数据
    let option = {
      color: ["#2f89cf"],
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      grid: {
        left: "0%",
        top: "10px",
        right: "0%",
        bottom: "4%",
        containLabel: true
      },
      xAxis: [
        {
          type: "category",
          data: [
            "旅游行业",
            "教育培训",
            "游戏行业",
            "医疗行业",
            "电商行业",
            "社交行业",
            "金融行业"
          ],
          axisTick: {
            alignWithLabel: true
          },
          //修改坐标轴文字大小颜色等
          axisLabel: {
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: "12"
            }
          },
          // X轴样式不显示
          axisLine: {
            show: false
          }
        }
      ],
      yAxis: [
        {
          type: "value",
          axisLabel: {
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: "12"
            }
          },
          // y轴线条样式
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,.1)"
              // width: 1,
              // type: "solid"
            }
          },
          // y轴分割线样式
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,.1)"
            }
          }
        }
      ],
      series: [
        {
          name: "直接访问",
          type: "bar",
          // 修改柱子的宽度
          barWidth: "35%",
          // data的数据是动态的，通过请求得到的
          data: this.data,
          itemStyle: {
            // 修改柱子的圆角
            barBorderRadius: 5
          }
        }
      ]
    };
    // 把配置项给实例对象
    myChart.setOption(option);
    // 让图标跟随屏幕自动的去缩放
    window.addEventListener("resize", () => {
      myChart.resize();
    });
  }

• 结果