「这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战」

写在前面:之前讲了一下在vue脚手架项目中改怎么封装echarts能更好的使用,今天的话就聊一下echarts在实际项目中有哪些应用和要特别注意的点.

事关我对于Echarts使用的那些事--其二

特别注意的点

1. echarts的容器要给定宽高
2. echarts的容器要是唯一dom
3. 获取dom的时机一定要在mounted及以后,否则会报错找不到dom

常规应用

常规应用就是折线图,柱形图和饼图,然后衍生出来的分别是趋势图,二分图和环形图,以及其他一些有着特殊需求的图表,比如说双y轴,柱线图，水球图，极坐标系等等。

常用属性(组件)

常用属性就是实现一个Echarts图表需要经常使用哪些配置项，至少需要哪些配置，才能出来一个最简单的图表，这个在官方文档里面有详细的讲解和解释，一般都是直接搜索，聚焦到某一个需求，也可以根据经验去判断需求会在哪个值上发生改变。

lenden(图例)

legend: {
  data: ["深圳"], //显示的数据
  textStyle: {
    fontSize: 38, //字体大小
    color: "#fff",//字体颜色
    padding: [0, 50],//图例的间距
  },
  itemWidth: 24,//图例的宽高
  itemHeight: 24,
  itemStyle: {},//图例的颜色
},

grid(网格)

grid: {
  left: "10%",
  right: "3%",
  bottom: "15%",
  top: "15%",
  //我一般就当padding用
},

xAxis(x轴)

xAxis: {
  type: "category",
  boundaryGap: true, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
  data: [], //x轴显示的内容,比如说日期
  axisLine: {
    show: false, //x轴线
  },
  axisTick: {
    show: false,
  },
  axisLabel: {
    color: "ffffff",
    fontFamily: "Tencent",
    fontSize: "24px",
    align: "center",//x轴的文本样式
  },
},

yAxis(y轴)

yAxis: {
  type: "value",
  splitNumber: 5,//y轴分割段数
  axisLabel: {
    color: "#ffffff",
    fontFamily: "Tencent",
    fontSize: "24px",//y轴文本样式
  },
  splitLine: {
    lineStyle: {
      color: "rgba(255, 255, 255, 0.15)",
    }, //y轴线的样式
  },
},

tooltip(提示框)

tooltip: {
  show: true, //鼠标hover到图标上,显示的内容
  formatter: function(params, value) {
    return params.name + ":" + params.percent + "%";
    //formatter可以自定义里面的内容,可以查看里面返回的参数进行自定义
  },
  textStyle: {
    fontSize: 34,
  },
},

series(数据源)

//用来定义图表的数据类型和样式以及不同类型的图表不同的效果
...

End