echarts的使用步骤

1.安装echarts:npm i echarts -S

2.使用Echarts:

   1.全局main.js引入，所有组件使用

    2.局部引入使用：import * as echarts from 'echarts';

    3.注册成插件使用（比较少用）

3.在结构中写入图表的容器，记住务必要给盒子大小，不然不显示；

<div id="main" style="width: 100%;height:100%;"></div>

4.在methods中写入图表方法(注意这是第一种写法)

第一种写法：let myChart = echarts.init(document.getElementById('main'));
    
                      let option = {};

在结尾要加上

                     option && myChart.setOption(option);

//调用配置

        

methods: {
    echarts(){
    let chartDom = document.getElementById('main');
    let myChart = echarts.init(chartDom);
    //以上两行可以合并写成
    //let myChart = echarts.init(document.getElementById('main'));
    
    let option;

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

option && myChart.setOption(option);

}

}

第二种写法：

let myChart = echarts.init(document.getElementById('main'));
myChart.setOption({}）

let myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
    title: {
        text: 'ECharts 入门示例',
    },
    tooltip: {},
    xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
    },
    yAxis: {},
    series: [
        {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20],
        }
    ],
});

• series

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

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

  • boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。

• yAxis：直角坐标系 grid 中的 y 轴

• grid：直角坐标系内绘图网格。

• title：标题组件

• tooltip：提示框组件

• legend：图例组件

• color：调色盘颜色列表

• option = {
      // color设置我们线条的颜色 注意后面是个数组
      color: ['pink', 'red', 'green', 'skyblue'],
      // 设置图表的标题
      title: {
          text: '折线图堆叠123'
      },
      // 图表的提示框组件 
      tooltip: {
          // 触发方式
          trigger: 'axis'
      },
      // 图例组件
      legend: {
         // series里面有了 name值则 legend里面的data可以删掉
      },
      // 网格配置  grid可以控制线形图 柱状图 图表大小
      grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          // 是否显示刻度标签 如果是true 就显示 否则反之
          containLabel: true
      },
      // 工具箱组件  可以另存为图片等功能
      toolbox: {
          feature: {
              saveAsImage: {}
          }
      },
      // 设置x轴的相关配置
      xAxis: {
          type: 'category',
          // 是否让我们的线条和坐标轴有缝隙
          boundaryGap: false,
          data: ['星期一', '周二', '周三', '周四', '周五', '周六', '周日']
      },
       // 设置y轴的相关配置
      yAxis: {
          type: 'value'
      },
      // 系列图表配置 它决定着显示那种类型的图表
      series: [
          {
              name: '邮件营销',
              type: 'line',
             
              data: [120, 132, 101, 134, 90, 230, 210]
          },

注意xy轴配置中的type的category与value决定了图表是纵向摆放还是横向摆放。

总结：echarts的使用步骤一共可以分为四步：

1.准备一个具有宽高大小的盒子容器。

2.初始化echarts实例对象。

3.准备配置项

4.将配置项设置给echarts实例对象