vue3中，echarts使用（一）——柱状图和折线图的结合使用

vue3中，echarts使用（一）——柱状图和折线图的结合使用

官网：https://echarts.apache.org/zh/index.html

官网示例：https://echarts.apache.org/examples/zh/index.html

官网配置项API：https://echarts.apache.org/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); }); }; 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/10864.html