一、项目中导入echarts
安装
npm install echarts
导入echarts
2.1全部导入
//main.js
import * as echarts from "echarts/core";
app.provide("ec", echarts);
2.2按需导入
//utils/echarts.js
// 引入 echarts 核心模块,核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts/core";
/** 引入柱状图and折线图图表,图表后缀都为 Chart */
import { BarChart, LineChart, PieChart } from "echarts/charts";
// 引入提示框,标题,直角坐标系,数据集,内置数据转换器组件,组件后缀都为 Component
import {
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
LegendComponent,
} from "echarts/components";
// 标签自动布局,全局过渡动画等特性
import { LabelLayout, UniversalTransition } from "echarts/features";
// 引入 Canvas 渲染器,注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from "echarts/renderers";
// 注册必须的组件
echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
LabelLayout,
UniversalTransition,
CanvasRenderer,
LegendComponent,
LineChart,
BarChart,
PieChart,
]);
// 导出
export default echarts;
//main.js
import echarts from "./utils/echarts";
app.provide("ec", echarts);
二、封装子组件
//WYEcharts.vue
import { onMounted, inject, ref } from "vue";
let echarts = inject("ec"); //引入echarts
const props = defineProps({ //父组件传入数据,确定要显示的图表
options: {
type: Object,
default() {
return {};
},
},
});
onMounted(() => { //页面加载时渲染图表
change();
});
const chart = ref();
const change = () => {
const chartBox = echarts.init(chart.value);
const option = props.options;
chartBox.setOption(option);
// 根据页面大小自动响应图表大小
window.addEventListener("resize", function () {
chartBox.resize();
});
};
.main {
width: 100%;
height: 100%;
}
三、在父组件中使用
import WYEcharts from "../components/PayEcharts";
const lineOption = { //折线图
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
},
yAxis: {
type: "value",
},
grid: {
top: 26,
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: "line",
},
],
};
const barOption = { //饼图
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",
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
},
],
};
注:想要在父组件多次使用二次封装的echarts组件,需要使用ref获取DOM元素,不可以使用id获取
好文链接
发表评论