enn-chart-vue3

npm 地址

gitlab 地址

依赖

• echarts5.2.2

使用步骤

安装依赖，yarn add enn-charts-vue3/npm i enn-charts-vue3

使用例子

<template>
  <div class="chart" ref="chartRef"></div>
</template>
<script setup>
import echarts, { getOptions, getLoadingOption } from "enn-charts-vue3";
import { onMounted } from 'vue3'

const chartRef = ref(null); // chart对于dom
let myChart = null; // chart实例
onMounted(() => {
  myChart = echarts.init(chartRef.value);
  const option = getOptions()
  option.xAxis.data = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  option.series[0].data = [1, 2, 3, 4, 5, 6, 7]
  myChart.setOption(option);
});
</script>

<style scoped>
.chart {
  width: 500px;
  height: 400px;
}
</style>

getOptions 说明

• 入参(type = 'line', dataNum = 1).
  • 第一个参数为组件类型【line/pie/bar】，第二个为数据量
• 出参
  • 返回一个有默认值的echarts option，需要手动去修改里面的data以及横轴纵轴等