jsnb2333 / echarts-taro3-vue Goto Github PK

View Code? Open in Web Editor NEW

taro3.x-vue构建的微信小程序echarts组件，及使用示列。来自 Cecilxx/echarts-taro3-vue 的forked，作者联系不上，解决两个问题，现在可以在taro中正常运行。

JavaScript 98.80% TypeScript 0.06% HTML 0.05% Vue 1.06% Less 0.02%

echarts-taro3-vue's Introduction

echarts-taro3-vue

基于Taro3.x-Vue2框架构建的微信小程序版本echarts组件，及使用示例

传送门

Taro3.x-React版本

特性

Taro3.x
Vue2

功能

快速安装

npm i echarts-taro3-vue

使用

引入EChart组件后，拿到EChart组件实例，并调用实例refresh(option)方法设置图标数据，option 格式参照echarts官网

举例：

// 柱状图
<template>
  <view class="bar-chart">
    <e-chart
      ref="vueref0"
      canvas-id="bar-canvas"
    />
  </view>
</template>

<script lang="js">
import Taro from "@tarojs/taro";
import { EChart } from 'echarts-taro3-vue'

export default {
  name: 'Bar',
  components: {EChart},
  mounted () {
    const defaultOption = {
      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)'
          }
        }
      ]
    }
    Taro.nextTick(() => {
      this.$refs.vueref0.refresh(defaultOption)
    })
  },
}
</script>

<style>
.bar-chart {
  width: 100%;
  height: 100vh;
}
</style>

// 仪表盘
<template>
  <view class="gauge-chart">
    <e-chart
      ref="vueref0"
      canvas-id="gauge-canvas"
    />
  </view>
</template>

<script lang="js">
import Taro from "@tarojs/taro";
import { EChart } from 'echarts-taro3-vue'
export default {
  name: 'Gauge',
  components: {EChart},
  mounted () {
    const option = {
      tooltip: {
        formatter: "{a} <br/>{b} : {c}%",
      },
      toolbox: {
        feature: {
          restore: {},
          saveAsImage: {},
        },
      },
      series: [
        {
          name: "业务指标",
          type: "gauge",
          detail: { formatter: "{value}%" },
          data: [{ value: 50, name: "完成率" }],
        },
      ],
    };
    Taro.nextTick(() => {
      this.$refs.vueref0.refresh(option)
    })
  },
}
</script>

<style>
.gauge-chart {
  width: 100%;
  height: 100vh;
}
</style>