vue3中，echarts使用（一）——柱状图和折线图的结合使用
官网：/zh/index.html
官网示例：/examples/zh/index.html
官网配置项API：/zh/option.html#title
效果-柱状图和折线图的结合
代码
index.vue
<template><div class="container" v-if="true"><div ref="echartsRef" class="attendance-data"></div></div></template><script setup lang="ts" name="absenteeism">import * as echarts from "echarts";import { useEcharts } from "@/hooks/useEcharts";import { ref, onMounted, nextTick } from "vue";const echartsRef = ref<HTMLElement>();const chartsView = () => {let myChart: echarts.ECharts = echarts.init(echartsRef.value as HTMLElement);let option: echarts.EChartsCoreOption = {// 标题组件，包含主标题和副标题title: {text: "月度材料费统计",padding: 5,textStyle: {color: "#fff"},left: 20,top: 0},// 提示框组件 鼠标经过 tip提示tooltip: {trigger: "axis",backgroundColor: "rgba(0, 0, 0, 1)",borderColor: "rgba(0, 0, 0, 1)",padding: [16, 24],textStyle: {color: "#fff"},axisPointer: {type: "cross",crossStyle: {color: "#999"}}},// 图例组件legend: {show: true, // 是否显示图例// 边框宽度和内边距属性值为数值，不加单位。orient: "horizontal", // 图例的朝向 vertical-垂直显示 horizontal-水平显示data: ["实际材料花费", "计划材料花费", "达成率"],left: 140, // x轴方向取值 left/center/right 具体像素值或百分比top: 24, // y轴方向取值 top/center/bottom// backgroundColor: "#fac858", // 背景颜色// borderColor: "#5470c6", // 边框颜色// borderWidth: "200", // 边框宽度// padding: "12", // 内边距// itemGap: 40, // 控制每一项的间距，也就是图例之间的距离 属性值为数值，不带单位// itemHeight: 5 , // 控制图例图形的高度 属性值为数字，不加单位textStyle: {// 设置图例文字样式color: "#ccc",fontSize: 13}},// 上下左右及大小-设置图表占总面积的地方grid: {left: "12%", //左侧 y轴内容距离边框的距离（类似padding-left）top: "27%", // 与容器顶部的距离right: "12%",bottom: "10%" // 与容器底部的距离},// grid坐标系的x轴xAxis: [{type: "category",data: ["安全措施", "大型生产", "国补资金", "其他生产", "一般生产"],axisPointer: {type: "shadow"},axisTick: {show: false // 不显示坐标轴刻度线}// show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字// axisTick: {// show: false // 不显示坐标轴刻度线// },// axisLine: {// show: false // 不显示坐标轴线// },// axisLabel: {// show: false // 不显示坐标轴上的文字// },// splitLine: {// show: false // 不显示网格线// }}],// grid坐标系的y轴yAxis: [{type: "value",name: "材料费（万元）",min: 0,max: 100,interval: 20,splitLine: {//分割线配置show: true,lineStyle: {color: "rgb(64, 94, 134)",width: 1}},axisLabel: {formatter: "{value}"}},{type: "value",name: "达成率",min: 0,max: 100,interval: 40,splitLine: {//分割线配置show: true,lineStyle: {color: "rgb(64, 94, 134)",width: 1}},axisLabel: {formatter: "{value} %"}}],// 系列列表。每个系列通过 type 决定自己的图表类型series: [{name: "实际材料花费",type: "bar",// barWidth: 8, // 柱状图粗细// barGap: 8, // 柱图之间的间距itemStyle: {normal: {color: "#0075FF",barBorderRadius: [6, 6, 0, 0]}},tooltip: {valueFormatter: function (value: any) {return value;}},data: [48, 65, 24, 39, 67]},{name: "计划材料花费",type: "bar",// barWidth: 8, // 柱状图粗细// barGap: 8, // 柱图之间的间距itemStyle: {normal: {color: "#00F0FF",barBorderRadius: [6, 6, 0, 0]}},tooltip: {valueFormatter: function (value: any) {return value;}},data: [32, 19, 72, 63, 51]},{name: "达成率",type: "line",yAxisIndex: 1,smooth: true,itemStyle: {normal: {color: "#FF7D7D",barBorderRadius: [6, 6, 0, 0]}},tooltip: {valueFormatter: function (value: string) {return value + " %";}},data: [60, 75, 32, 53, 26]}]};useEcharts(myChart, option);};onMounted(() => {nextTick(() => {chartsView();});});</script><style scoped lang="scss">.container {position: relative;flex: 3;margin-bottom: 30px;background: rgb(0 0 0 / 30%);border-radius: 10px;span {font-size: 16px;color: #ffffff;}}.attendance-data {// height: 100%;height: calc(94% - 30px);margin-top: 20px;// overflow-y: auto;}</style>
src\hooks\useEcharts.ts
import {onUnmounted } from "vue";import * as echarts from "echarts";/*** @description 使用Echarts(只是为了添加图表响应式)* @param {Element} myChart Echarts实例(必传)* @param {Object} options 绘制Echarts的参数(必传)* @return void* */export const useEcharts = (myChart: echarts.ECharts, options: echarts.EChartsCoreOption) => {if (options && typeof options === "object") {myChart.setOption(options);}const echartsResize = () => {myChart && myChart.resize();};window.addEventListener("resize", echartsResize, false);onUnmounted(() => {window.removeEventListener("resize", echartsResize);});};
