Echarts+VUE实现折线柱状图

一、代码实现

如果需要对折线和柱子、刻度、轴、文本标签等进行设置，请参考前面几篇文章或者阅读网站文档。

echarts网站：https://echarts.apache.org/zh/index.html

<template>
  <div id="main_bar_line" style="width: 100%; height: 450px"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: "chart",
  data() {
    return {
      xy_data: [
        {name: '一', value: 6, value2: 6.0,},
        {name: '二', value: 32, value2: 10.2,},
        {name: '三', value: 70, value2: 10.3,},
        {name: '四', value: 86, value2: 11.5,},
        {name: '五', value: 100.7, value2: 10.6,},
        {name: '六', value: 125.6, value2: 13.5,},
        {name: '七', value: 112.2, value2: 17,},
      ],
    };
  },
  created() {
    this.initBarLine();
  },
  methods: {
    initBarLine() {
      this.$nextTick(() => {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('main_bar_line'));
        // 指定图表的配置项和数据
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'cross' }
          },
          legend: {
            data: ['温度', '降水量']
          },
          xAxis: [
            {
              type: 'category',
              axisTick: {
                alignWithLabel: true
              },
              data: this.xy_data.map(item => item.name+'月')
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '降水量',
              min: 0,
              max: 250,
              position: 'right',
              axisLabel: {
                formatter: '{value} ml'
              }
            },
            {
              type: 'value',
              name: '温度',
              min: 0,
              max: 25,
              position: 'left',
              axisLabel: {
                formatter: '{value} °C'
              }
            }
          ],
          series: [
            {
              name: '降水量',
              type: 'bar',
              yAxisIndex: 0,
              data: this.xy_data.map(item => item.value)
            },
            {
              name: '温度',
              type: 'line',
              smooth: true,
              yAxisIndex: 1,
              data: this.xy_data.map(item => item.value2)
            }
          ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      })
    },
  }
};
</script>

二、效果图