uni-app 使用echarts图表插件步骤（柱状）

一、去插件市场下载插件：https://ext.dcloud.net.cn/plugin?id=1668

二、把components和static里面的文件复制到自己的项目中:（如果你的图表不显示，肯定是忘记了static文件的js）

三、使用：

<template>
 <view>
  <echarts :option="option" style="height: 300px;" @click="echartsClick"></echarts>
  <echarts-el :option="option" style="height: 300px;"></echarts-el>
  <button @click="updateClick">切换数据</button>
 </view>
</template>

<script>
import Echarts from '@/components/echarts/echarts.vue'
import EchartsEl from '@/components/echarts/echarts-el.vue'
export default {
 data() {
  return {
   option: {},
   option2: {
    notMerge: true, // 自定义变量：true代表不合并数据，比如从折线图变为柱形图则需设置为true；false或不写代表合并
    tooltip: {
     trigger: 'axis',
     positionStatus: true,
     formatterStatus: true, // 自定义变量：是否格式化tooltip，设置为false时下面三项均不起作用
     formatterUnit: '元', // 自定义变量：数值后面的单位
     formatFloat2: true, // 自定义变量：是否格式化为两位小数
     formatThousands: true // 自定义变量：是否添加千分位
    },
    legend: {
     data: ['邮件', '手机']
    },
    grid: {
     left: '5%',
     right: '8%',
     bottom: '5%',
     containLabel: true
    },
    xAxis: [
     {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五']
     }
    ],
    yAxis: [
     {
      type: 'value'
     }
    ],
    series: [
     {
      name: '邮件',
      type: 'bar',
      data: [120, 132, 101, 134, 90],
      // 自定义变量，以数组形式传递渐变参数
      linearGradient: [0, 0, 0, 1,
                        [
                            {offset: 0, color: '#2378f7'},
                            {offset: 0.7, color: '#2378f7'},
                            {offset: 1, color: '#83bff6'}
                        ]]
     },
     {
      name: '手机',
      type: 'bar',
      data: [220, 182, 191, 234, 290],
      // 自定义变量，以数组形式传递渐变参数
      linearGradient: [0, 0, 0, 1,
                        [
                            {offset: 0, color: '#0bac00'},
                            {offset: 0.7, color: '#0dcb00'},
                            {offset: 1, color: '#0fef00'}
                        ]]
     }
    ]
   },
   option3: {
    notMerge: true, // 自定义变量：true代表不合并数据，比如从折线图变为柱形图则需设置为true；false或不写代表合并
    xAxis: {
     type: 'category',
     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
     type: 'value'
    },
    series: [
     {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
       color: 'rgba(220, 220, 220, 0.8)'
      }
     }
    ]
   }
  };
 },
 components: {
  Echarts,
  EchartsEl
 },
 onLoad() {
  this.option = this.option2
 },
 methods: {
  /**
   * 点击事件
   * @param {Object} params
   */
  echartsClick(params) {
   console.log('点击数据', params)
  },
  /**
   * 切换数据
   */
  updateClick() {
   if (this.option === this.option2) {
    this.option = this.option3
   } else {
    this.option = this.option2
   }
  }
 }
};
</script>

<style></style>

效果图：

四、如果想要其他样式图表，可根据echarts官网样例：https://echarts.apache.org/examples/zh/index.html

替换项目里面的option值其他不变，自己随意的更改图表样式