常用的echarts图表配置，有柱状图、折线图、饼图等

先定义好有宽高的容器：

<!-- 柱状折线图容器 -->
<div id="main" style="width: 50%;height:400px;"></div>
<!-- 饼图容器 -->
<div id="bingtu" style="width: 1000px;height:400px;"></div>
<!-- 多折线图容器 -->
<div id="zhexian" style="width: 1000px;height:400px;"></div>

柱状折线图的初始化函数：

// 柱状折线图
function Achart() {
  var myChart = echarts.init(document.getElementById('main'));
  var option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['供入电量', '供出电量', '线损率'],
      right: 150
    },
    xAxis: [
      {
        type: 'category',
        data: ['2021-8-1', '2021-8-2', '2021-8-3', '2021-8-4', '2021-8-5', '2021-8-6', '2021-8-7'],
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: '#020304'
        }
      }
    ],
    yAxis: [
      {
        name: '单位：KWh',
        nameTextStyle: {
          color: '#8e8e8e'
        },
        type: 'value',
        axisLine: {
          show: true,
          lineStyle: {
            color: '#e0e6f1'
          }
        },
        axisLabel: {
          color: '#8e8e8e'
        }
      },
      {
        name: '单位：%',
        max: 100,
        nameTextStyle: {
          color: '#8e8e8e'
        },
        type: 'value',
        axisLine: {
          show: false,
          lineStyle: {
            color: '#e0e6f1'
          }
        },
        axisLabel: {
          color: '#8e8e8e'
        }
      }
    ],
    series: [
      {
        name: '供入电量',
        type: 'bar',
        barWidth: 20,
        color: '#34c1f0',
        itemStyle: {
          borderRadius: [3, 3, 0, 0]
        },
        data: [
          600, 500, 900, 500, 800, 500, 500
        ]
      },
      {
        name: '供出电量',
        type: 'bar',
        barWidth: 20,
        color: '#fdaa56',
        itemStyle: {
          borderRadius: [3, 3, 0, 0]
        },
        data: [
          400, 300, 600, 300, 600, 300, 300
        ]
      },
      {
        name: '线损率',
        type: 'line',
        lineStyle: {
          color: '#769ffb'
        },
        itemStyle: {
          color: '#769ffb'
        },
        symbolSize: 10,
        showSymbol: false,
        data: [30, 20, 50, 20, 50, 20, 20],
        yAxisIndex: 1,
      }
    ]
  };
  myChart.setOption(option);
  // 侦听窗口，然后重新渲染echarts的大小
  window.addEventListener("resize", () => { myChart.resize(); });
}
Achart()

饼图的初始化函数：

// 饼图
function Cchart() {
  var myChart = echarts.init(document.getElementById('bingtu'));
  const y = [
    { value: 10, name: '电量缺数' },
    { value: 2, name: '电量突变' },
    { value: 3, name: '表码异常' },
  ]
  const option = {
    color: ["#5b8ff9", "#5ad8a6", "#5b6d8e"],
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'horizontal',
      bottom: "bottom",
      formatter: function (name) {
        let value = 0
        for (let i = 0; i < y.length; i++) {
          if (y[i].name === name) {
            value = y[i].value
          }
        }
        return name + "   " + value + "kw/h";
      },
      itemGap: 50
    },
    series: [
      {
        type: 'pie',
        labelLine: {
          show: false
        },
        label: {
          show: false
        },
        radius: '50%',
        data: y,
        emphasis: {
          labelLine: {
            show: false
          },
          label: {
            show: false
          },
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  myChart.setOption(option);
}
Cchart()

多折线图初始化函数：

// 多折线图
function Dchart() {
  var myChart = echarts.init(document.getElementById('zhexian'));
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      bottom: "bottom",
      itemGap: 40,
      data: ["广东", "广西", "云南", "贵州", "海南", "深圳"]
    },
    xAxis: {
      type: 'category',
      axisTick: {
        show: false
      },
      data: ['2020/08', '2020/08', '2020/08', '2020/08', '2020/08', '2020/08', '2020/08']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: "广东",
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        symbolSize: 10,
        showSymbol: false,
        itemStyle: {
          color: '#000000'
        },
        type: 'line'
      },
      {
        name: "广西",
        data: [100, 100, 100, 100, 100, 100, 100],
        symbolSize: 10,
        showSymbol: false,
        itemStyle: {
          color: '#6300bf'
        },
        type: 'line'
      },
      {
        name: "云南",
        data: [200, 200, 200, 200, 200, 200, 200],
        symbolSize: 10,
        showSymbol: false,
        itemStyle: {
          color: '#02a7f0'
        },
        type: 'line'
      },
      {
        name: "贵州",
        data: [300, 300, 300, 300, 300, 300, 300],
        symbolSize: 10,
        showSymbol: false,
        itemStyle: {
          color: '#f59a23'
        },
        type: 'line'
      },
      {
        name: "海南",
        data: [400, 400, 400, 400, 400, 400, 400],
        symbolSize: 10,
        showSymbol: false,
        itemStyle: {
          color: '#95f204'
        },
        type: 'line'
      },
      {
        name: "深圳",
        data: [500, 500, 500, 500, 500, 500, 500],
        symbolSize: 10,
        showSymbol: false,
        itemStyle: {
          color: '#d9001b'
        },
        type: 'line'
      }
    ]
  };
  myChart.setOption(option);
}
Dchart()

各个echart图的效果如下：