#插件需求# uni-app如何使用Echarts教程

9***@qq.com

碰到同样的问题，使用echart碰到各种问题，使用uni-app案例不显示，也没报错。

梦寻汝

你好 H5 和小程序没有问题只有手机上面不显示（我和你的问题一样）请问你这个解决了么？

2020-05-12 11:34

得推软件工作室 - PHP全栈开发，需要外包可以@我

github搜 echarts-for-weixin

西洲

这样就不支持H5了吧

2019-09-18 18:46

h***@haomo-studio.com - 热爱技术的企业家

以下支持H5

<template>  
  <div :id="dataId" class="echarts"></div>  
</template>  

<script>  
import * as echarts from 'echarts';  

export default {  
  name: "HmEcharts",  
  components: {},  
  props: {  
    dataId: {  
      type: String,  
      default: "echarts",  
    },  
    dataUrl: {  
      type: String,  
      default: null,  
    },  
    apiType: {  
      type: String,  
      default: null, // Loopback/Java  
    },  
    optionUrl: {  
      type: String,  
      default: null, //echarts的基本配置  
    },  
    registerMapType: {  
      type: String,  
      default: null, //注册的地图类型  
    },  
    registerMap: {  
      type: String,  
      default: null, //注册的地图  
    },  
    eventListeners: {  
      type: Array,  
      default: null, // 事件监听器  
    },  
  },  
  data() {  
    return {  
      hmChart: null,  
      option: {  
        backgroundColor: "#FFFFFF",  
        title: {  
          text: "Customized Pie",  
          left: "center",  
          top: 20,  
          textStyle: {  
            color: "#ccc",  
          },  
        },  
        tooltip: {  
          trigger: "item",  
          formatter: "{a} <br/>{b} : {c} ({d}%)",  
        },  
        visualMap: {  
          show: false,  
          min: 80,  
          max: 600,  
          inRange: {  
            colorLightness: [0, 1],  
          },  
        },  
        series: [  
          {  
            name: "访问来源",  
            type: "pie",  
            radius: "55%",  
            center: ["50%", "50%"],  
            data: [  
              {  
                value: 235,  
                name: "视频广告",  
              },  
              {  
                value: 274,  
                name: "联盟广告",  
              },  
              {  
                value: 310,  
                name: "邮件营销",  
              },  
              {  
                value: 335,  
                name: "直接访问",  
              },  
              {  
                value: 400,  
                name: "搜索引擎",  
              },  
            ],  
            roseType: "radius",  
            label: {  
              normal: {  
                textStyle: {  
                  color: "rgba(0, 0, 0, 0.3)",  
                },  
              },  
            },  
            labelLine: {  
              normal: {  
                lineStyle: {  
                  color: "rgba(0, 0, 0, 0.3)",  
                },  
                smooth: 0.2,  
                length: 10,  
                length2: 20,  
              },  
            },  
            itemStyle: {  
              normal: {  
                color: "#c23531",  
                shadowBlur: 0,  
                shadowColor: "rgba(0, 0, 0, 0.5)",  
              },  
            },  
            animationType: "scale",  
            animationEasing: "elasticOut",  
          },  
        ],  
      },  
      params: {},  
    };  
  },  
  created() {  
    const self = this;  
    console.log(`hm-echarts: `, echarts);  
  },  
  mounted() {  
    let self = this;  
    console.log(`hm-echarts ${self.dataId} onLoad`);  

    self.getOption().then(function(option) {  
      console.log('hm-echarts option: ', option);  
      self.hmChart = echarts.init(  
        document.getElementById(self.dataId)  
      );  
      if (!self.registerMapType || !self.registerMap) {  
        self.setChartOption(option);  
        self.registerEventFunc(self.hmChart);  
      } else {  
        // 注册地图  
        registerMapFunc(option);  
      }  
    });  
  },  
  methods: {  
    getOption() {  
      let self = this;  
      return new Promise(function(resolve, reject) {  
        if (!self.optionUrl) {  
          resolve(self.option);  
        } else {  
          uni.request({  
            url: self.optionUrl,  
            success: resp => {  
              resolve(resp);  
            },  
            fail: err => {  
              console.error(err);  
              reject(err);  
            },  
          });  
        }  
      });  
    },  

    /**  
     * 渲染图表  
     */  
    setChartOption(option) {  
      this.hmChart.setOption((option = option));  
    },  

    /**  
     * 注册chart的事件函数回调  
     */  
    registerEventFunc(chart) {  
      let self = this;  
      console.log("registerEventFunc: ", self.attributes);  

      if (!self.eventListeners) {  
        return;  
      }  

      self.eventListeners.forEach(listener => {  
        console.log(`注册事件：`, listener);  
        chart.on(listener.eventType, function(params) {  
          eval(listener.func);  
        });  
      });  
    },  

    /**  
     * 注册地图  
     */  
    registerMapFunc(option) {  
      uni.request({  
        url: self.registerMap,  
        success: resp => {  
          console.log(  
            "registerMap: ",  
            self.registerMapType,  
            self.registerMap,  
            resp.data  
          );  
          echarts.registerMap(self.registerMapType, resp.data);  
          self.setChartOption(option);  
          self.registerEventFunc(self.hmChart);  
        },  
        fail: err => {  
          console.error(err);  
        },  
      });  
    },  

    /**  
     * 从数据接口获取数据，并根据dataHook/optionHook修改数据  
     */  
    setOptionData(option, resp) {  
      let self = this;  
      // 不同apiType获取数据的方式是不同的  
      let data = resp;  
      if (self.apiType == "Loopback") {  
        data = resp.data;  
      }  
      // 执行dataHook  
      self.$emit(self.dataId + "." + "data-hook", data);  
      // 替换数据  
      self.$jsonpatch.apply(option, [  
        {  
          op: "replace",  
          path: "/series/0/data",  
          value: data,  
        },  
      ]);  
      console.log("option: ", option);  
    }  
  },  
};  
</script>  
<style>  
@charset "UTF-8";  

.echarts {  
  width: 100%;  
  height: 100%;  
  min-width: 600upx;  
  min-height: 360upx;  
  overflow: hidden;  
  margin: 0;  
  padding: 0;  
}  
</style>