vue中使用echarts绘柱形图+折线图

一、完成后效果图

二、.vue文件完整代码

<template>
  <!-- 柱形图+折线图多个展示 -->
  <div
    id="myMaxbar"
    :style="{width: '500px', height: '300px'}"
  ></div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myMaxbar = this.$echarts.init(document.getElementById("myMaxbar"));
      // 绘制图表
      myMaxbar.setOption({
        color: ["#0EA9A1", "#95CE5C", "#21D86D"],
        //提示框组件配置
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          textStyle: {
            fontSize: 12,
            color: "#fff",
          },
          padding: 10,
        },
        // 图例组件
        legend: {
          show: true,
          top: "0",
          left:'5%',
          selectedMode: true,
          data: [
            {
              name: "销售额",
              textStyle: {
                color: "#0EA9A1",
              },
            },
            {
              name: "销售件数",
              textStyle: {
                color: "#95CE5C",
              },
            },
            {
              name: "销售品种",
              textStyle: {
                color: "#21D86D",
              },
            },
          ],
        },
        //定义折线图距离左边多少右边多少的距离
        grid: {
          left: "2%",
          right: "5%",
          bottom: "16%",
          containLabel: true, //区域是否包含坐标轴的刻度标签
        },
        xAxis: [ //定义x轴
          {
            type: "category", //设置x轴的类型
            data: [
              "茅台",
              "五粮液",
              "剑南春",
              "郎酒",
              "洋河蓝色经典",
              "水井坊",
              "泸州老窖",
              "汾酒",
              "翰格",
              "茅台",
              "洋河蓝色经典",
              "剑南春",
              "郎酒",
              "洋河蓝色经典",
              "水井坊",
              "泸州老窖",
              "汾酒",
              "翰格",
              "尊尼获加金牌",
              "剑南春",
              "郎酒",
            ],
            nameTextStyle: {
              fontSize: 14,
            },
            axisLabel: { //坐标轴刻度的相关设置
              interval: 0, //设置成 0 强制显示所有标签。
              rotate: -45, //标签旋转的角度
              margin: 15,
              textStyle:{
                color:'#fff',
              }
            },
          },
        ],
        yAxis: [ // 定义y轴
          {
            nameTextStyle: {
              color: "#666666",
              fontSize: 14,
            },
            show: true,
            type: "value",
            axisLabel: { // 坐标轴刻度标签的相关设置
              textStyle: {
                color: "#fff",
              },
            },
            axisLine: { // 坐标轴轴线相关设置
              show: false,
            },
            splitLine: { // 坐标轴在网格区域中的分隔线
              lineStyle: { //x轴网格样式设置
                color: "#12403F",
              },
            },
          },
        ],
        series: [ //系列列表。每个系列通过 type 决定自己的图表类型
          {
            name: "销售额",
            type: "bar", // 设置为柱状图
            barWidth: 14,
            //柱状图设置数值
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            },
            data: [
              150,
              232,
              201,
              154,
              190,
              330,
              410,
              190,
              330,
              410,
              150,
              232,
              201,
              154,
              190,
              330,
              410,
              190,
              230,
              200,
              180,
            ],
          },
          {
            name: "销售件数",
            type: "line", // 设置为折线图
            symbol: "circle",
            symbolSize: [10, 10],
            data: [
              120,
              132,
              101,
              134,
              90,
              230,
              210,
              190,
              330,
              410,
              120,
              132,
              101,
              134,
              90,
              230,
              210,
              190,
              230,
              200,
              180,
            ],
          },
          {
            name: "销售品种",
            type: "line",
            symbol: "circle",
            symbolSize: [10, 10],
            data: [
              111,
              122,
              100,
              104,
              70,
              210,
              200,
              160,
              300,
              400,
              100,
              102,
              91,
              124,
              40,
              210,
              230,
              140,
              240,
              180,
              140,
            ],
          },
        ],
      });
    },
  },
};
</script>

<style>
</style>

备注

我这个有加背景图，如果是纯白，有些字体设置的#fff会看不到。