Vue2_Echarts_折柱混合图

原创已于 2025-06-20 09:09:52 修改 · 233 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

于 2023-11-08 09:39:25 首次发布

文章介绍了如何使用ECharts库在Vue组件中创建一个包含日产量和日产量环比的条形图和折线图，展示了数据配置和样式设置的详细步骤。

一、效果展示

二、实现代码

<template>
  <div class="linebarChat"></div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.setChart();
},
  methods: {
    setChart() {
      let option = {
        color: ["#fbce45", "#FF8A8A", "#25b0f3"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
          formatter: "{b0}({a0}): {c0}<br />{b1}({a1}): {c1}%",
        },
        legend: {
          data: ["日产量", "日产量环比"],
          left: "35%",
          top: "8%",
          textStyle: {
            color: "#00CCFF",
            fontSize: 16,
          },
        },
        xAxis: {
          type: "category",
          axisPointer: {
            type: "shadow",
          },
          axisLine: {
            lineStyle: {
              color: "#61B9C8",
            },
          },
          data: ["11-02","11-03","11-04","11-05","11-06","11-07"],
        },
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: false,
            },
            name: "日产量",
            axisLine: {
              show: true,
              lineStyle: {
                color: "#61B9C8",
              },
            },
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                fontFamily: "Microsoft YaHei",
                color: "#61B9C8",
              },
            },
          },
          {
            type: "value",
            splitLine: {
              show: false,
            },
            name: "日产量环比",
            axisLabel: {
              formatter: "{value}%",
            },
            axisLine: {
              lineStyle: {
                color: "#61B9C8",
              },
            },
          },
        ],
        series: [
          {
            name: "日产量",
            type: "bar",
            barWidth: "50%",
            data: [11, 7, 6, 9, 8, 10],
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#fff",
                fontSize: "7px",
              },
              formatter: "{c}",
            },
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                // 渐变背景色
                colorStops: [
                  {
                    offset: 0,
                    color: "#50A2F6",
                  },
                  {
                    offset: 0.4,
                    color: "#9490F9",
                  },
                  {
                    offset: 1,
                    color: "#DF7DFD",
                  },
                ],
                global: false,
              },
            },
          },
          {
            name: "日产量环比",
            type: "line",
            symbol: "circle",
            // 设置曲线
            smooth: true,
            // 多Y轴，对应yAxis索引为1的轴
            yAxisIndex: 1,
            data: [48, 42, 13, 17, 11, 20],
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#fff",
                fontSize: "7px",
              },
              formatter: "{c}",
            },
          },
        ],
      };
      let myChart = this.$echarts(this.$el);

      myChart.clear();
      myChart.resize();
      myChart.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
.linebarChat {
  width: 100%;
  height: 100%;
}
</style>