Echarts的配置修改

前言：

必须先熟悉Echarts 的基本使用

Echarts的使用_Mister.code的博客-CSDN博客

依赖配置项手册

Documentation - Apache ECharts

熟悉常用的配置项，方便快速上手修改成我们想要的样式。

书写的格式如下：

setOption({
    title:{},
    legend:{},
    ......
    media:[{}]
})

 （1）title：标题

 （2）tooltip：图标的提示框组件

当鼠标放在图像上指定区域内的时候，会显示出对应的信息

是否显示提示框：

  tooltip: {
    show:true
//    show:false
  }

触发的方式：

坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。

  tooltip: {
    // axis 是坐标轴的意思
    trigger: 'axis'
  }

 什么都不触发

  tooltip: {
    trigger: 'none'
  }

 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用

  tooltip: {
    trigger: 'item'
  }

 （3）legend：图例组件

  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  }

（4）toolboc：工具箱组件  可以拥有下载按钮 可以另存为图片等功能

  toolbox: {
    feature: {
      saveAsImage: {}
    }

（5）：网格配置 grid可以控制线形图 柱状图 图表大小

当图表放在盒子中的时候，grid可以指定在这个盒子的哪个位置，偏左还是偏右，偏上还是偏下。

  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },

上下左右：

top:'0%',
bottom:'0%',
left:'0%',
right:'0%'

是否显示刻度标签：

  grid: {
    containLabel: true
  }

 （6）xAxis and yAxis：设置x y轴的相关配置

是否显示x轴：

xAxis: {
    show:true
}

​

xAxis.type or yAxis.type 属性(坐标轴的类型)：

• value数值轴，适用于连续数据。

• category类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。

• time时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。

• log对数轴。适用于对数数据。

x轴的显示情况：

category + data

  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },

boundaryGap： 是否让线条与y轴的坐标轴有缝隙

xAxis: {
    boundaryGap:false
}

（7）series：系列图表配置，决定显示什么类型的图表

series.type:

tyep:line:折线图

tyep:bar:柱状图

tyep:pie：饼状图

tyep:scatter：散点图

name值 = legend里面的data值，都是起到数据图标的命名作用

若想修改线条的颜色，要与series平级去写color属性

series:{
 
},
color:['red','pink','yellow','skyblue']