vue2.x+echarts封装的折线图和柱状图组件

组件charts.vue

<template>
    <div :style="chartStyle" ref="chart"></div>
  </template>

  <script>
  import echarts from 'echarts'

  export default {
    name: 'EChart',
    props: {
      options: {
        type: Object,
        default: () => ({})
      },
      chartStyle: {
        type: Object,
        default: () => ({
            height: '400px',
            width: '100%'
        })
      },
      xAxis: {
        type: Object,
        default: () => ({
          type: 'category',
          boundaryGap: false,
          data: []
        })
      },
      yAxis: {
        type: Object,
        default: () => ({
          type: 'value'
        })
      },
      series: {
        type: Array,
        default: () => []
      },
      grid: {
        type: Object,
        default: () => ({})
      },
      legend: {
        type: Object,
        default: () => ({})
      },
      tooltip: {
        type: Object,
        default: () => ({})
      },
      lineColors: {
        type: Array,
        default: () => ['#00BAFF', '#3DE7C9', '#CCEDF0', '#FFB71C', '#FF5A5A']
      },
      barColors: {
        type: Array,
        default: () => ['#00BAFF', '#3DE7C9', '#CCEDF0', '#FFB71C', '#FF5A5A']
      },
      showLoading: {
        type: Boolean,
        default: false
      },
      loadingOption: {
        type: Object,
        default: () => ({
          text: '数据加载中...',
          color: '#00BAFF',
          textColor: '#000',
          maskColor: 'rgba(255, 255, 255, 0.8)',
          zlevel: 0
        })
      }
    },
    data() {
      return {
        chartInstance: null
      }
    },
    watch: {
      options() {
        this.renderChart()
      },
      xAxis() {
        this.renderChart()
      },
      yAxis() {
        this.renderChart()
      },
      series() {
        this.renderChart()
      },
      grid() {
        this.renderChart()
      },
      legend() {
        this.renderChart()
      },
      tooltip() {
        this.renderChart()
      },
      lineColors() {
        this.renderChart()
      },
      barColors() {
        this.renderChart()
      },
      showLoading() {
        if (this.showLoading) {
          this.chartInstance.showLoading('default', this.loadingOption)
        } else {
          this.chartInstance.hideLoading()
        }
      }
    },
    mounted() {
      this.chartInstance = echarts.init(this.$refs.chart)

      if (this.showLoading) {
        this.chartInstance.showLoading('default', this.loadingOption)
      }

      this.renderChart()
    },
    beforeDestroy() {
      this.dispose()
    },
    methods: {
      renderChart() {
        const option = {
          backgroundColor: this.options.backgroundColor || '#fff',
          xAxis: this.xAxis,
          yAxis: this.yAxis,
          series: this.series,
          grid: this.grid,
          legend: this.legend,
          tooltip: this.tooltip
        }
        // 根据传入的数据和配置参数生成图表
        this.generateChart(option)
      },

      generateChart(option) {
        // 配置折线图和柱状图的样式
        if (option.series && option.series.length > 0) {
            option.series.forEach((s, index) => {
            if (s.type === 'line') {
                s.itemStyle = {
                color: this.lineColors[index] || this.lineColors[0]
                }
                s.lineStyle = {
                color: this.lineColors[index] || this.lineColors[0]
                }
            } else if (s.type === 'bar') {
                s.itemStyle = {
                color: this.barColors[index] || this.barColors[0]
                }
            }
            })
        }

        // 渲染图表
        this.chartInstance.setOption(option)
      },

        dispose() {
            if (this.chartInstance) {
                this.chartInstance.dispose()
                this.chartInstance = null
            }
        }
    }
}
</script>

<style scoped>
/* 在这里可以写样式，比如设置图表容器的宽度和高度 */
</style>

这个组件支持以下传入参数：

• options：图表的配置参数，格式为一个对象，具体格式参考 ECharts 官方文档；
• chartStyle：图表容器的样式，比如设置宽度、高度等；
• xAxis：X 轴的配置参数，格式为一个对象，具体格式参考 ECharts 官方文档；
• yAxis：Y 轴的配置参数，格式为一个对象，具体格式参考 ECharts 官方文档；
• series：图表系列的配置参数，格式为数组，每个元素为一个对象，具体格式参考 ECharts 官方文档；
• grid：图表的网格配置参数，格式为一个对象，具体格式参考 ECharts 官方文档；
• legend：图例的配置参数，格式为一个对象，具体格式参考 ECharts 官方文档；
• tooltip：提示框的配置参数，格式为一个对象，具体格式参考 ECharts 官方文档；
• lineColors：折线图的颜色数组，格式为一个数组，每个元素为一个颜色值；
• barColors：柱状图的颜色数组，格式为一个数组，每个元素为一个颜色值；
• showLoading：是否显示数据加载动画；
• loadingOption：数据加载动画的配置参数，格式为一个对象，具体格式参考 ECharts 官方文档。

使用示例

<template>
    <charts
      ref="chart"
      :data="chartData"
      :options="chartOptions"
      :xAxis="xAxis"
      :yAxis="yAxis"
      :series="chartSeries"
      :grid="grid"
      :legend="legend"
      :tooltip="tooltip"
      :lineColors="lineColors"
      :barColors="barColors"
      :showLoading="showLoading"
      :loadingOption="loadingOption"
    />
</template>

<script>
import charts from "@/components/charts"
export default {
  name: 'MyChart',
  components: {
    charts
  },
  data() {
    return {
      chartData: [
        { name: 'A', value: 100 },
        { name: 'B', value: 200 },
        { name: 'C', value: 150 },
        { name: 'D', value: 300 },
        { name: 'E', value: 180 }
      ],
      chartOptions: {
        title: {
          text: '示例图表',
          left: 'center'
        }
      },
      xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E']
      },
      yAxis: {
        type: 'value'
      },
      chartSeries: [
        {
          type: 'line',
          name: '数据一',
          data: [100, 200, 150, 300, 180]
        }
      ],
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      legend: {
        data: ['数据一']
      },
      tooltip: {
        trigger: 'axis'
      },
      lineColors: ['#009688'],
      barColors: ['#009688'],
      showLoading: true,
      loadingOption: {
        text: '加载中...',
        color: '#009688'
      },
      chartStyle: {
        width: '100%',
        height: '400px' // 设置图表容器的高度
      }
    }
  }
}
</script>

如果有需求，您可以根据自己的需求进一步定制和扩展。