uniapp小程序使用原生echarts非第三方封装 小程序使用echarts 图表 可视化

前言：之前小程序做的图表，当时没找到太多使用echarts的教程，大多都是二次封装的。连uniapp都是推荐别人二次封装的图表，然后用了之后呢，发现不是自己想要的效果（也许是自己对别人二次封装的代码不够熟悉吧

），然后干脆摸索下uniapp引入echarts图表（非他人封装的）。废话少说，看看成果~

参考uniapp自定义组件：https://uniapp.dcloud.net.cn/tutorial/miniprogram-subject.html

然后根据echarts官网提供跨平台方案中的微信小程序：

https://echarts.apache.org/handbook/zh/how-to/cross-platform/wechat-app

打开echarts-for-weixin项目：

https://github.com/ecomfe/echarts-for-weixin

根据要求，克隆该项目。首先上面说了，创建一个以wxcomponents为命名的文件夹，将改项目克隆到此文件夹中。

引入之后，还需要兼容一下。在page.json全局属性添加以下代码兼容。（注意路径~）

"globalStyle": {    "usingComponents": {      // echarts 图表      // #ifdef APP-PLUS || H5 || MP-WEIXIN || MP-QQ      "ec-canvas": "/wxcomponents/ec-canvas/ec-canvas" // 声明echarts的小程序组件 页面级配置是不生效的 只能在app.config.js里配置usingComponents      // #endif    }  }

使用过程：

创建一个test.vue文件，引入echarts

<script>import * as echarts from '@/wxcomponents/ec-canvas/echarts'</script>

标签使用：

<template>  <view class="container">    <view class="chart-container">      <ec-canvas        ref="chart"        id="chart-bar-canvas"        class="chart-bar-canvas"        :ec="ec"      ></ec-canvas>    </view>  </view></template>

还要初始化及数据赋值

<script>import * as echarts from '@/wxcomponents/ec-canvas/echarts'const option = {  xAxis: {    type: 'category',    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']  },  yAxis: {    type: 'value'  },  series: [    {      data: [150, 230, 224, 218, 135, 147, 260],      type: 'line'    }  ]}const echartsUtils = {  ec: {    lazyLoad: true,    onInit: (chartRef, echarts) =>      new Promise(resolve => {        chartRef.init((canvas, width, height, dpr) => {          const chartsInstance = echarts.init(canvas, null, {            width: width,            height: height,            devicePixelRatio: dpr // 像素          })          canvas.setChart(chartsInstance)          resolve(chartsInstance)          return chartsInstance        })      })  }}export default {  data () {    return {      ec: echartsUtils.ec    }  },  onReady: function () {    this.ec.onInit(this.$refs.chart, echarts).then(chart => {      chart.setOption(option)    })  },}</script>

完整demo代码

<template>  <view class="container">    <view class="chart-container">      <ec-canvas        ref="chart"        id="chart-bar-canvas"        class="chart-bar-canvas"        :ec="ec"      ></ec-canvas>    </view>  </view></template><script>import * as echarts from '@/wxcomponents/ec-canvas/echarts'const option = {  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(180, 180, 180, 0.2)'      }    }  ]}const echartsUtils = {  ec: {    lazyLoad: true,    onInit: (chartRef, echarts) =>      new Promise(resolve => {        chartRef.init((canvas, width, height, dpr) => {          const chartsInstance = echarts.init(canvas, null, {            width: width,            height: height,            devicePixelRatio: dpr // 像素          })          canvas.setChart(chartsInstance)          resolve(chartsInstance)          return chartsInstance        })      })  }}export default {  data () {    return {      ec: echartsUtils.ec    }  },  onReady: function () {    this.ec.onInit(this.$refs.chart, echarts).then(chart => {      chart.setOption(option)    })  },}</script><style lang="scss">.chart-container {  height: 500px;​  .chart-bar-canvas {    width: 100%;    height: 500px;  }}</style>

效果查看：

实战应用：应用到项目的时候，会有这样的问题，在赋值series:[]时候记得赋值类型，否则不显示

实战应用：

<template><view class="chart-container">    <ec-canvas     ref="chart"     id="chart-bar-canvas"     class="chart-bar-canvas"     :ec="ec"    ></ec-canvas></view></template>

<script>import * as echarts from '../../wxcomponents/ec-canvas/echarts'const option = {  title: {    text: '裸眼视力'  },  tooltip: {    trigger: 'axis'  },  legend: {    right:0 ,    data: ['右眼', '左眼'],  },  grid: {    left: '10%',    right: '10%',    bottom: '10%',    containLabel: true  },  xAxis: {    type: 'category',    boundaryGap: false,    data: []  },  yAxis: {    type: 'value'  },  series: []}const echartsUtils = {  ec: {    lazyLoad: true,    onInit: (chartRef, echarts) =>      new Promise(resolve => {        chartRef.init((canvas, width, height, dpr) => {          const chartsInstance = echarts.init(canvas, null, {            width: width,            height: height,            devicePixelRatio: dpr // 像素          })          canvas.setChart(chartsInstance)          resolve(chartsInstance)          return chartsInstance        })      })  },}export default {  data () {    return {      ec:echartsUtils.ec,    }  },  methods: {    // 因为是tabs标签，所以我选择在选中某个标签时进行初始化    selectIndex(index) {      if (index == 1) {        this.$nextTick(() => {          this.ec.onInit(this.$refs.chart, echarts).then(chart => {            chart.setOption(option)          })       }    }  }}</script>

数据获取就忽略了，自己根据数据整合

效果图：

教程结束咯，记得点赞收藏。不懂的下方评论，或私聊文章来源地址https://www.toymoban.com/news/detail-493614.html

到了这里，关于uniapp小程序使用原生echarts非第三方封装 小程序使用echarts 图表 可视化的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！