【可视化大屏】echarts介绍

news2025/3/3 3:05:48

使用echarts的步骤：
1.下载并引用echarts.js文件
2.准备一个具体宽高的容器
3.初始化echarts实例对象

// 实例化对象
  var myChart = echarts.init(document.querySelector(".bar .chart"));

4.指定配置项和数据

// 指定配置和数据
  var option = {
    color: ["#2f89cf"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    grid: {
      left: "0%",
      top: "10px",
      right: "0%",
      bottom: "4%",
      containLabel: true
    }
    ......
    }

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

 // 把配置给实例对象
  myChart.setOption(option);

对配置项的解释

//设置线条的颜色，是个数组
 color:['pink','red','green','blue'],
 
 //鼠标放上去显示的图表提示框组件
 tooltip: {
 //触发方式 ：放到坐标轴上就触发
    trigger: 'axis'
  },

在这里插入图片描述

//图例组件，点击可以显示或隐藏当前这根折线
legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },

//工具箱组件，可以保存为图片
toolbox: {
    feature: {
      saveAsImage: {}
    }
  },

//网格配置，grid可以控制线形图 柱状图 图标大小
grid: {
    left: '3%',//网格与dom容器左边的距离
    right: '4%',
    bottom: '3%',
    containLabel: true//显示左边刻度标签
  },

在这里插入图片描述

  //x轴配置
  xAxis: {
    type: 'category',
    boundaryGap: false,//第一个坐标和坐标轴有缝隙
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
 
  yAxis: {
    type: 'value'
  },
  
 //type可以取
'value' 数值轴，适用于连续数据。
'category' 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。
'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
'log' 对数轴。适用于对数数据。对数轴下的堆积柱状图或堆积折线图可能带来很大的视觉误差，并且在一定情况下可能存在非预期效果，应避免使用。

//系列图表配置 决定显示哪种类型图表
series: [
    {
    //series里面有name的话，可以删掉legend里的data
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',//叠加 下一个数据显示的位置要自身叠加上一个对应坐标的值
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    ...