【echatrs常用图形配置】

主要是常用图表配置意义和优化体验的代码，如：折线（面积）、柱状及环形图三种典型类型图表的配置及效果图。

 

一、快捷小方法

1.常用配置意义

option里的配置如果不想显示的话可以直接用false，如：xAxis: false,

let option = {
    title：//设置标题（不常用，做适应的时候也没有那么完美，建议放在图表外）,
    tooltip: //悬浮框,
    legend: //图例,
    grid: //图表位置,
    xAxis: //X轴配置，用[{},{}],可配置两个
    yAxis: //X轴配置（同上）,
    series: //数据, 用数组显示多条数据（如多个折线、柱状图等）
};

2.屏幕改变时图形跟着改变

//引入echarts组件
import * as echarts from "echarts";

mounted() {
    this.initTpysChart();
},
methods: {
    initTpysChart() {
        //根据id 初始化echarts
        let myChart = this.$echarts.init(document.getElementById("chart"));
        let option = {......};
        myChart.setOption(option, true);
		//屏幕改变时调整大小
		window.addEventListener("resize", () => {
			myChart.resize();
		});
		this.$on("hook:destroyed", () => {
			window.removeEventListener("resize", () => {
				myChart.resize();
			});
		});
    }
}

二、典形图表配置

1.折线图（平滑、折线、面积以及小样式）

option = {
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    axisTick: {
      inside: true,
      lineStyle: {
        color: "#4ca6ff",
        opacity: 0.4,
      }
    },
    axisLine: {
      lineStyle: {
        color: "#4ca6ff",
        opacity: 0.4,
      }
    },
    axisLabel: {
      textStyle: {
        color: "#76A1CE",
        fontSize: '0.75rem',
      },
    },
  },
  yAxis: {
    type: 'value',
    name: '(元/千瓦时)',
    nameTextStyle: {
      color: "#76A1CE",
      fontSize: '0.75rem',
    },
    type: "value",
    splitNumber: 3,
    axisLabel: {
      show: true, 
      interval: "auto",
      formatter: "{value}",
      textStyle: {
        color: "#76A1CE",
        fontSize: '0.75rem',
      },
    },
    splitLine: {
      lineStyle: {
        color: "#4ca6ff",
        opacity: 0.2,
      },
    },
    axisTick: {
      show: false, //不显示坐标轴刻度
    },
    //隔行变色
    splitArea: {
      show: true,
      areaStyle: {
        color: ['#4da6ff0d', 'transparent']
      }
    }
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      typ