uni-app中使用ECharts配置四种不同的图表(示例详解)

npm install echarts --save

import * as echarts from 'echarts'  // 引入ECharts库

mounted() {
  this.initChart()
},
methods: {
  initChart() {
    const chartContainer = this.$refs.chartContainer  // 获取图表容器 DOM
    this.chart = echarts.init(chartContainer)  // 创建ECharts实例并传入图表容器
  }
}

<view ref="chartContainer" class="chart-container"></view>

methods: {
  initChart() {
    const chartContainer = this.$refs.chartContainer
    this.chart = echarts.init(chartContainer)
    const option = {
      title: {
        text: '柱状图示例' // 标题文本
      },
      xAxis: {
        type: 'category', // x轴类型为类目轴
        data: ['项目1', '项目2', '项目3', '项目4'] // x轴类目数据
      },
      yAxis: {
        type: 'value' // y轴类型为数值轴
      },
      series: [{
        type: 'bar', // 图表类型为柱状图
        data: [120, 200, 150, 80] // 柱状图数据
      }]
    }
    this.chart.setOption(option) // 将配置应用到图表实例
  }
}

methods: {
  initChart() {
    const chartContainer = this.$refs.chartContainer
    this.chart = echarts.init(chartContainer)
    const option = {
      title: {
        text: '折线图示例'
      },
      xAxis: {
        type: 'category', // x轴类型为类目轴
        boundaryGap: false, // 取消x轴两端空白
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] // x轴类目数据
      },
     : {
        type: 'value' // y轴类型为数值轴
      },
      series: [{
        type: 'line', // 图表类型为折线图
        data: [120, 180, 150, 80, 70, 110, 130] // 折线图数据
      }]
    }
    this.chart.setOption(option)
  }
}

methods: {
  initChart() {
    const chartContainer = this.$refs.chartContainer
    this.chart = echarts.init(chartContainer)
    const option = {
      title: {
        text: '饼图示例'
      },
      series: [{
        type: 'pie', // 图表类型为饼图
        data: [
          {value: 335, name: '项目1'}, // 饼图数据
          {value: 310, name: '项目2'},
          {value: 234, name: '项目3'},
          {value: 135, name: '项目4'},
          {value: 1548, name: '项目5'}
        ]
      }]
    }
    this.chart.setOption(option)
  }
}

methods: {
  initChart() {
    const chartContainer = thisrefs.chartContainer
    this.chart = echarts.init(chartContainer)
    option = {
      title: {
        text: '散点图示例'
      },
      xAxis: {}, 
      yAxis {},
      series: [{
        symbolSize: 20, // 散点图点的大小
        data: [
          [10.0, 8.04], // 散点图数据，每个数据点包含两个数值
          [8.0, 6.95],
          [13.0, 7.58],
          [9.0, 8.81],
          [11.0, 8.33],
          [14.0, 9.96],
          [6.0, 7.24],
          [4.0, 4.26],
          [12.0, 10.84],
          [7.0, 4.82],
          [5.0, 5.68]
        ],
        type: 'scatter' // 图表类型为散点图
      }]
    }
    this.chart.setOption(option)
  }
}

beforeDestroy() {
  if (this.chart) {
    this.chart.dispose()
  }
}