uniapp vue2 引入echarts柱状图

在uni-app（微信小程序、H5等多端开发框架）中引入ECharts的柱状图，首先需要安装ECharts的Vue版本。你可以通过npm或yarn来安装：

// 使用npm
npm install @vue-charts/echarts

// 或者使用yarn
yarn add @vue-charts/echarts

然后，在你的Vue2项目中，可以在组件的`<script>`标签内导入并使用ECharts及其柱状图模块：

<template>
  <div id="chartContainer"></div>
</template>

<script setup>
import { ECharts } from '@vue-charts/echarts'

const data = [
  // 示例数据，替换为你实际的数据
  {
    name: '销售额',
    value: [120, 200, 150, 80]
  },
  // 添加更多数据...
]

setup() {
  const chartRef = ref(null)
  onMounted(async () => {
    const echartsInstance = await ECharts.init(chartRef.value) // 初始化图表实例
    echartsInstance.setOption({
      title: {
        text: '柱状图示例'
      },
      xAxis: {
        type: 'category',
        data: data.map(item => item.name)
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        name: '销售额',
        type: 'bar',
        data: data.map(item => item.value)
      }]
    })
  })

  return {
    chartRef,
    // 其他组件数据...
  }
}
</script>

在这个例子中，我们首先初始化了ECharts实例，并设置了柱状图的基本配置，包括标题、X轴和Y轴的信息以及系列的数据。记得在模板中创建一个id为`chartContainer`的元素供图表渲染。