vue中echarts的封装
程序员文章站
2024-01-25 20:14:41
...
在html中
<template>
<div>
<!-- 准备一个局别宽和高的容器 -->
<div ref="box" style="height: 600px; background-color: #fff"></div>
</div>
</template>
在js中
<script>
//引入echarts
const echarts = require("echarts");
export default {
// 接收外部传入的数据
props: {
// 标题
title: {
type: String,
default: () => [],
},
//数据
value: {
type: String,
default: () => [],
},
},
// 方法
methods: {
// 绘制报表
drawCharts() {
// 1. 初始化echarts
let myCharts = echarts.init(this.$refs.box);
// 2. 配置
let option = {
series: [
{
type: "gauge",
startAngle: 225, //开始角度
endAngle: -45, //结束角度
min: 0,
max: 100,
splitNumber: 10, //每个间隔
itemStyle: {
color: "#58D9F9", //主题颜色
//shadowColor: "rgba(0,138,255,0.45)", //阴影颜色
//shadowBlur: 10, //羽化面积
//shadowOffsetX: 2,
//shadowOffsetY: 2,
},
progress: {
show: true, //是否显示环形进度
roundCap: false, //环形进度是否圆角
width: 9, //环形宽度
},
pointer: {
//指针icon
color: "#58D9F9",
icon:"path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z",
length: "60%", //长度
width: 6, //指针宽
offsetCenter: [0, "5%"], //指针位置
},
axisLine: {
//背后阴影
roundCap: false,
lineStyle: {
width: 18,
color: [
[0.8, "#7CFFB2"],
[1, "#FF6E76"],
],
},
},
axisTick: {
//小刻标
splitNumber: 2,
distance: -18,
lineStyle: {
width: 1,
color: "#fff",
},
},
splitLine: {
//大刻标
length: 8,
distance: -18,
lineStyle: {
width: 3,
color: "#fff",
},
},
axisLabel: {
//大刻标上数字
distance: -5, //数字位置
color: "#999",
fontSize: 12,
},
title: {
fontSize:16,
offsetCenter: [0, "100%"],
},
detail: {
//中间文字
// backgroundColor: "#fff",
// borderColor: "#999",
// borderWidth: 2,
width: "60%",
lineHeight: 10,
height: 10,
// borderRadius: 8,
offsetCenter: [0, "60%"],
valueAnimation: true,
formatter: function (value) {
return "{value|" + value.toFixed(0) + "}{unit|分}";
},
rich: {
value: {
fontSize: 16,
color: "#777",
},
unit: {
fontSize: 16,
color: "#999",
},
},
},
data: [
{
value: this.value,
name: `- ${this.title} -`
},
],
},
],
};
// 3. 使用配置 创建报表
myCharts.setOption(option);
},
},
mounted() {
setTimeout(() => {
// 调用绘制报表函数
this.drawCharts();
}, 1000);
},
watch: {
value() {
this.drawCharts();
},
},
};
</script>