uni-app 引入 echarts

步骤

一、下载echarts

1、echarts.min.js(4.7.0) 复制保存

2、通过定制下载

 二、导入到项目中

 三、使用

        前提知识：需先了解 renderjs  

<!-- 自定义组件 Chart -->

<template>
  <view class="income-trend">
    <view class="title">
      <text>{{ titleMsg.title }}</text>
      <text class="unit">{{ titleMsg.unit }}</text>
    </view>
    <view class="chart-style">
      <!-- #ifdef APP-PLUS -->
      <!--  -->
      <view
        id="echarts"
        :total_data="total_data"
        :change:total_data="echarts.dataChange"
        style="width: 681rpx; height: 450rpx"
      ></view>
      <!-- #endif -->
      <!-- #ifdef H5 -->
      <view
        id="echarts"
        style="width: 681rpx; height: 450rpx"
      ></view>
      <!-- #endif -->
    </view>
  </view>
</template>

<script>
export default {
  props: ["chartData", "titleMsg"],
  data() {
    return {
      total_data: null,
    };
  },
  watch: {
    chartData: {
      handler(newVal, oldVal) {
        // console.log("watch chartData", newVal);
        this.total_data = newVal;
      },
      deep: true, // 深度监听对象内部属性的变化
      immediate: true,
    },
  },
};
</script>

<!-- 通过renderjs 能够操作视图层的dom  -->
<!-- module 需要与上面 :change:total_data="echarts.dataChange" 的对应 -->
<!-- eg：module="xxxx"  :change:total_data="xxxx.dataChange"  -->

<script module="echarts" lang="renderjs">
// /utils/echarts 即下载 的echarts 文件 保存路径 自行替换

import * as echarts from "@/utils/echarts";
let chartDom
export default {
  // props: ["total_data"],
  mounted() {
    chartDom = echarts.init(document.getElementById("echarts"))
    // console.log("chartDom", chartDom);
    // h5 可以直接在这里直接 setOption
    // 自行设置自己需要的 options 即可
    // chartDom.setOption({...}) 通过this 能拿到 total_data 
	},
  methods: {
    // total_data 数据变化之后可以监听到 
    // app端 在这里是不能通过this去获取data，eg：this.total_data 拿不到数据（×），h5则可以 
    // （√）
    dataChange(newVal) {

      let options = {
        grid: {
        top: newVal.seriesData.length == 0 ? "5%" : "8%",
        left: "10%",
        right: "5%",
        },
        xAxis: {
          type: 'category',
          // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          data: []
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: newVal.seriesData.length == 0 ? 10 : 'dataMax',
        },
        series: [
          {
            // data: [150, 230, 224, 218, 135, 147, 260],
            data: [],
            type: 'line',
            smooth: true,
            itemStyle : { normal: {label : {show: true}}},
          }
        ],
        tooltip : {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        }

      }
      if(JSON.stringify(newVal) != '{}') {
        options.xAxis.data = newVal.xAxisData
        options.series[0].data = newVal.seriesData
      }


      chartDom.setOption(options)
    }
  },

};
</script>

<style lang="scss" scoped>

.income-trend {
  width: 681rpx;
  height: 458rpx;
  background: #ffffff;
  box-shadow: 0rpx 4rpx 14rpx 0rpx rgba(229, 229, 229, 0.6);
  border-radius: 28rpx;
  margin: 20rpx auto;
  box-sizing: border-box;

  .title {
    width: 100%;
    height: 78rpx;
    // @include font(#000, 33rpx, 400);
    box-sizing: border-box;
    padding: 20rpx;
    .unit {
      // @include font(#6b6b6b, 26rpx, 400);
      margin-left: 20rpx;
    }
  }

  .chart-style {
    width: 100%;
    height: 380rpx;
  }
}
</style>

四、引用组件

<Chart
  :chartData="chart_data"
  :titleMsg="{ title: '营业趋势', unit: '单位：元' }"
></Chart>


<script>

export default {
    data() {
        return {
            chart_data: {
                // 自行设置数据
                xAxisData: [],
                seriesData: [] 
            }
        }
    }

</script>

可以通过运行到手机模拟器、Hbuilder X 内置浏览器 查看效果

此为简单的 折线图 栗子， 相关饼图等复杂图表可以修改相应的options实现 （若有错别字 or 单词编写错误，请高抬贵手）