echarts-taro3-vue
基于Taro3.x-Vue2框架构建的微信小程序版本echarts组件,及使用示例
传送门
特性
- 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">; name: 'Bar' components: EChart { 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 }</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">; name: 'Gauge' components: EChart { const option = tooltip: formatter: "{a} <br/>{b} : {c}%" toolbox: feature: restore: {} saveAsImage: {} series: name: "业务指标" type: "gauge" detail: formatter: "{value}%" data: value: 50 name: "完成率" ; Taro }</script> <style>gauge-chart width: 100%; height: 100vh;</style>
开发
npm run dev:weapp