Yr-echarts NPM

sh-echarts

npm

sh-echarts 是一个可运行在 Taro3 框架上的 Echarts 跨端组件，满足开发者使用一套 vue 或 vue3 代码，就让图表流畅的展示于 h5 和小程序端。

快速开始

组件引用

方式一：npm 安装引用（强烈推荐）

1、下载依赖

yarn add sh-echarts -S

2、项目引用

import { EChart } from "sh-echarts";

基础用法

vue3 语法，代码示例如下：

<template>
  <view class="bar-chart ">
    <EChart ref="canvas" />
  </view>
</template>

<script setup>
  import { ref, onMounted } from "vue";
  import Taro from "@tarojs/taro";
  import { EChart } from "sh-echarts";
  import "./index.less";

  const canvas = ref(null);
  const options = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    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",
      },
    ],
  };

  onMounted(() => {
    const echartComponentInstance = canvas.value; // 组件实例
    Taro.nextTick(() => {
      // 初始化图表
      echartComponentInstance.refresh(options).then((myChart) => {
        /** 异步更新图表数据 */
        setInterval(() => {
          let firstValue = options.series[0].data.shift();
          options.series[0].data.push(firstValue);
          myChart.setOption(options); // myChart 即为 echarts 实例，可使用的实例方法，具体可参考 echarts 官网
        }, 2000);
      });
    });
  });
</script>

通过 `setOption` 方法动态改变 echarts 数据

let myChart;
onMounted(() => {
  const echartComponentInstance = canvas.value;
  Taro.nextTick(() => {
    setTimeout(() => {
      echartComponentInstance.refresh(options).then((myChartInstance) => {
        myChart = myChartInstance;
      });
    }, 100);
  });
});

// ...
// 点击设置图表数据
function handleSetOptions(data) {
  myChart.setOption(data);
}

通过 `getOption` 方法获取当前实例的配置信息

let myChart;
onMounted(() => {
  const echartComponentInstance = canvas.value;
  Taro.nextTick(() => {
    setTimeout(() => {
      echartComponentInstance.refresh(options).then((myChartInstance) => {
        myChart = myChartInstance;
      });
    }, 100);
  });
});

// ...
// 点击获取图表数据
function handleGetOptions() {
  console.log(myChart.getOption());
}

通过 `getChart` 直接获取当前图表实例

onMounted(() => {
  const echartComponentInstance = canvas.value;
  Taro.nextTick(() => {
    setTimeout(() => {
      echartComponentInstance.refresh(options).
    }, 100);
  });
});

// ...
// 点击获取图表 echarts 实例
function handleGetEcharts() {
  const echartComponentInstance = canvas.value;
  const myChart = echartComponentInstance.getChart();
  console.log(myChart);
  // 后续可进行相关 echarts 操作
  // myChart.setOption(data);
  // myChart.resize(data);
}

组件实例方法

引入 EChart 组件后，拿到 EChart 组件实例，并调用实例 refresh(options)方法设置图表数据。具体可参考官方 options 配置项和Demo 示例。

示例

<template>
  <EChart ref="canvas" />
</template>

<script setup>
// ...

onMounted(() => {
  const echartComponentInstance = canvas.value; // 组件实例
  Taro.nextTick(() => {
    setTimeout(() => {
      echartComponentInstance.refresh(options); // 初始化图表
    }, 100);
  });

  // ...
  setTimeout(()=>{
    echartComponentInstance.setOption(options); // 异步更新图表数据，需要等 refresh 方法实例化完成
  },200)
});
</script>

方法

方法	参数	描述
refresh	(options ,callback )	创建一个 echarts 实例，返回 echartsInstance
setOption	(options )	设置图表实例的配置项以及数据，所有参数和数据的修改都可以通过 setOption 完成，echarts 会合并新的参数和数据，然后刷新图表。
resize	(resizeOptions)	改变图表尺寸，在容器大小发生改变时需要手动调用。
getChart	无	获取图表 echarts 实例，来完成更多自定义效果