vue使用Echart线柱混合图排坑记录

//vue 2 
    npm install echarts vue-echarts
    npm i -D @vue/composition-api
    //vue 3
    npm install echarts vue-echarts

//可全局也可在要使用的文件中用
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components'
import ECharts, { THEME_KEY } from 'vue-echarts'
use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent
])

<template>
  <v-chart class="chart" :option="options" />
</template>
<script>
import ECharts from 'vue-echarts'
import 'echarts'
export default {
  components: {
    'v-chart': ECharts,
  },
  data() {
    return {
    options: {
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  yAxis: {},
  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: "line"
  }]
    }
}
  },
}
</script>
<style scoped>
.chart {
  height: 400px;
}
</style>

<template>
  <v-chart class="chart" :option="options" />
</template>
<script>
import ECharts from 'vue-echarts'
import 'echarts'
export default {
  components: {
    'v-chart': ECharts,
  },
  data() {
    return {
    options: {
    legend: {
      data: ['蒸发量', '降水量']
    },
    xAxis: [
      {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
  yAxis: [
    {
      type: 'value',
      name: 'Precipitation',
      min: 0,
      max: 250,
      interval: 50,
      axisLabel: {
        formatter: '{value} ml'
      }
    }
  ],
  series: [
    {
      name: '蒸发量',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value + ' ml';
        }
      },
      data: [
        2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
      ]
    },
    {
      name: '降水量',
      type: 'line',
      tooltip: {
        valueFormatter: function (value) {
          return value + ' ml';
        }
      },
      data: [
        2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
      ]
    }
  ]
}
}
  },
}
</script>
<style scoped>
.chart {
  height: 400px;
}
</style>

xAxis: {
      type: 'category',
      data: ['星期一', '星期二', '星期三', '星期四']
  },
  yAxis: {
      type: 'category',
      data: ['a', 'b', 'm', 'n', 'p', 'q']
  },
  series: [{
      data: [
          // xAxis    yAxis
          [  0,        0,    2  ], // 意思是此点位于 xAxis: '星期一', yAxis: 'a'。
          [  '星期四',  2,    1  ], // 意思是此点位于 xAxis: '星期四', yAxis: 'm'。
          [  2,       'p',   2  ], // 意思是此点位于 xAxis: '星期三', yAxis: 'p'。
          [  3,        3,    5  ]
      ]
  }]

// 在数据进来之后处理下数据
     // 1. 遍历各个视图的数据元，把x轴的值合并去重，然后排序，
     // 2. 给各个series设置对应的值，值每个项对应[`${item[0]}`, item[1]]，就是把x轴转为字符串，然后对应y轴的值。
    render(data) {
      if (Object.keys(data).length) {
        let xdata = []
        for (let i = 0; i < this.keys.length; i++) {
          let key = this.keys[i]
          this.options.series[i].data = data[key]
            ? data[key].map(item => [`${item[0]}`, item[1]])
            : []
          let date = data[key] ? data[key].map(item => `${item[0]}`) : []
          xdata = [...xdata, ...date]
          this.options.series[i].name = key
        }
        xdata = Array.from(new Set(xdata))
        this.options.xAxis.data = xdata ? xdata.sort((a, b) => a - b) : []
      } else {
        this.clearChart()
      }
    },
    clearChart() {
      if (this.init) {
        this.$refs.chart.clear()
      }
    },

// 在数据进来之后处理下数据
     // 1. 先将数据按照x轴大小进行排序，保证x轴数据从小到大展示
     // 2. 遍历各个视图的数据元，把x轴的值合并去重，然后排序，
     // . 给各个series设置对应的值，值每个项对应[`${item[0]}`, item[1]]，就是把x轴转为字符串，然后对应y轴的值。
    render(data) {
      if (Object.keys(data).length) {
        let xdata = []
        for (let i = 0; i < this.keys.length; i++) {
          let key = this.keys[i]
          // 先将数据按照x轴大小进行排序，保证x轴数据从小到大展示
          list[key] && (list[key] = list[key].sort((a, b) => a[0] - b[0]))
          this.options.series[i].data = list[key]
            ? list[key].map(item => [`${item[0]}`, item[1]])
            : []
          let date = data[key] ? data[key].map(item => `${item[0]}`) : []
          xdata = [...xdata, ...date]
          this.options.series[i].name = key
        }
        xdata = Array.from(new Set(xdata))
        this.options.xAxis.data = xdata ? xdata.sort((a, b) => a - b) : []
      } else {
        this.clearChart()
      }
    },
    clearChart() {
      if (this.init) {
        this.$refs.chart.clear()
      }
    },