uni-app 使用 Echarts 教程

发布于 1周前 作者 sinazl 来自 Uni-App

uni-app 使用 Echarts 教程

参照Echarts页面模板，显示不出来，替换成新的js文件，会各种报错。Ucharts又不能满足需求。所以需要官方给一份uni-app如何使用Echarts教程。

信息类型 信息内容
开发环境 uni-app
版本号 未知
项目创建 未知
Harmonyos Next教程
9 回复

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


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

github搜 echarts-for-weixin

这样就不支持H5了吧

以下支持H5 <template>

</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}
{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](/user/charset) "UTF-8"; .echarts { width: 100%; height: 100%; min-width: 600upx; min-height: 360upx; overflow: hidden; margin: 0; padding: 0; } </style>

uniapp集成echarts有那么艰难么，看各种问题都怕了，都不想下手

小程序的吗，小程序的话可以看我的插件echarts-for-wx

我擦，我也要搞这个了，怎么感觉一堆坑啊

在uni-app中使用Echarts，可以通过引入Echarts的适配库echarts-for-weixin来实现。下面是一个简单的教程，展示如何在uni-app项目中集成和使用Echarts。

步骤一：安装Echarts适配库

首先，在你的uni-app项目中安装echarts-for-weixin库。你可以通过npm来安装：

npm install echarts-for-weixin --save

步骤二：引入Echarts

在你的页面组件中引入Echarts。假设你在pages/index/index.vue中使用Echarts。

<template>
  <view class="container">
    <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
  </view>
</template>

<script>
import * as echarts from 'echarts-for-weixin';

export default {
  data() {
    return {
      ec: {
        onInit: this.initChart
      }
    };
  },
  methods: {
    initChart(canvas, width, height, dpr) {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // 新增参数
      });
      canvas.setChart(chart);

      const option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
          data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      };

      chart.setOption(option);
      return chart;
    }
  }
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
}
ec-canvas {
  width: 100%;
  height: 500rpx;
}
</style>

步骤三：配置页面JSON

在pages/index/index.json中，配置页面使用的组件路径：

{
  "usingComponents": {
    "ec-canvas": "/node_modules/echarts-for-weixin/ec-canvas/ec-canvas"
  }
}

步骤四：运行项目

完成以上步骤后，你可以运行uni-app项目，并在相应的页面中看到Echarts图表。

npm run dev:%PLATFORM%

将%PLATFORM%替换为你想要运行的平台，如mp-weixin（微信小程序）。

总结

以上就是在uni-app中使用Echarts的基本步骤。通过引入echarts-for-weixin库，并在页面组件中配置和初始化Echarts，你可以轻松地在uni-app项目中集成和使用Echarts图表。希望这个教程对你有所帮助！

回到顶部