仪表盘组件
js
复制代码
<template>
<div class="w100 h100" ref="chart"></div>
</template>
<script>
import resize from "./mixins/resize";
export default {
mixins: [resize],
props: ["list"],
watch: {
list: {
// 深度监听没有旧值
handler(val) {
var shiji = 60;
var seriesData = [];
seriesData.push({
value: shiji,
itemStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#ffffff",
},
{
offset: 1,
color: "yellow",
},
]),
},
});
let option = {
series: [
{},
{
detail: {
show: true,
},
data: seriesData,
},
{
endAngle: 220 - (260 * shiji) / 100,
},
],
};
this.chart.setOption(option);
},
// 这里是关键，代表递归监听的变化
deep: true,
},
},
data() {
return {
chart: null,
};
},
mounted() {
this.$nextTick(() => {
this.initChart(); // 体温
});
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart = null;
clearInterval(this.timeId);
this.timeId = null;
},
methods: {
// 体温
initChart() {
this.chart = this.$echarts.init(this.$refs.chart);
this.chart.setOption({
tooltip: {
show: false,
trigger: "item",
axisPointer: {
type: "line",
},
formatter: "{b} : {c}",
textStyle: {
fontSize: 20,
},
borderWidth: 10,
},
series: [
{
name: "刻度",
type: "gauge",
center: ["50%", "50%"],
radius: "82%",
min: 0, //最小刻度
max: 100, //最大刻度
splitNumber: 4, //刻度数量
startAngle: 220,
endAngle: -40,
axisLine: {
show: true,
lineStyle: {
width: 10,
color: [[1, "rgba(0,0,0,0)"]],
},
}, //仪表盘轴线
axisLabel: {
show: true,
color: "#8D98A6",
fontSize: 10,
distance: 5,
}, //刻度标签。
axisTick: {
show: true,
splitNumber: 10,
lineStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#ee9003",
},
{
offset: 1,
color: "#00ffff",
},
]),
width: 1,
// length:10
},
length: 5,
}, //刻度样式
splitLine: {
show: true,
length: 0,
lineStyle: {
color: "#00ffff",
width: 0,
},
}, //分隔线样式
},
{
type: "gauge",
radius: "100%",
center: ["50%", "50%"],
min: 0, //最小刻度
max: 100, //最大刻度
splitNumber: 0, //刻度数量
startAngle: 220,
endAngle: -40,
axisLine: {
show: true,
lineStyle: {
width: 10,
color: [
[
1,
new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "rgba(59,128,226,.2)",
},
{
offset: 1,
color: "rgba(59,128,226,.2)",
},
]),
],
],
},
},
//分隔线样式。
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
pointer: {
show: true,
length: "60%",
width: "2%",
},
title: {
show: false,
},
detail: {
show: false,
offsetCenter: [0, 30],
color: "#00ffff",
formatter: function (params) {
return params + "%";
},
textStyle: {
fontSize: this.fontSize(0.2),
fontWeight: 700,
},
},
// data: seriesData,
},
{
type: "gauge",
radius: "100%",
center: ["50%", "50%"],
min: 0, //最小刻度
max: 100, //最大刻度
splitNumber: 0, //刻度数量
startAngle: 220,
// endAngle: 220 - 260 * shiji / 100,
axisLine: {
show: true,
lineStyle: {
width: 10,
color: [
[
1,
new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "rgba(255, 51, 0, 1)",
},
{
offset: 0.5,
color: "rgba(254, 219, 101, 1)",
},
{
offset: 1,
color: "rgba(100, 222, 202, 1)",
},
]),
],
],
},
},
//分隔线样式。
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
pointer: {
show: true,
length: "60%",
width: "2%",
},
title: {
show: false,
},
detail: {
show: true,
offsetCenter: [0, 55],
color: "#62ddc2",
formatter: function (params) {
return "参与战斗率";
},
textStyle: {
fontSize: this.fontSize(0.12),
fontWeight: 700,
},
},
// data: seriesData,
},
],
});
},
},
};
</script>
<style lang="scss" scoped>
@import "./css/rem.scss";
.item {
width: 33%;
}
</style>
立体柱状图------根据type更换颜色，数据大于6个自动切换
js
复制代码
<template>
<div class="w100 h100" ref="chart7"></div>
</template>
<script>
import resize from "./mixins/resize";
let color = [];
var color1 = ["rgba(47,102,192,.40)", "#00f562", "#a9f8c9"];
var color2 = ["rgba(47,102,192,.40)", "#f39800", "#f0e693"];
export default {
mixins: [resize],
props: ["list", "type"],
watch: {
list: {
handler(val) {
// const xAxisData = val.map(r => r.companyName); // x轴数据
// const MAX = val.map(r => r.containCount); // 总人数
// const VALUE = val.map(r => r.liveInCount); // 出勤人数
const xAxisData = [
"啥建档立卡九省联考解决解决",
"1月订单-13",
"1月订单-14",
"1月订单-3",
"1月订单-5",
"1月订单-6",
];
const MAX = [100, 100, 100, 100, 100, 100];
const VALUE = [70 - 11, 70 - 13, 70 - 14, 70 - 3, 70 - 5, 70 - 6];
// 深度监听没有旧值
let option = {
tooltip: {
show: true,
trigger: "axis", // 触发类型为坐标轴触发
},
xAxis: [
{
data: xAxisData,
},
],
series: [
{
data: MAX, // 总床位数
},
{
data: VALUE, // 在住人数
},
],
};
this.chart.setOption(option);
if (xAxisData.length > this.maxNum) {
let num = 0;
if (!this.timeId) {
this.timeId = setInterval(() => {
if (num + this.maxNum == xAxisData.length) {
num = 0;
} else {
num += 1;
}
let option = {
dataZoom: [
{
startValue: num, // 从头开始。
endValue: num + this.maxNum - 1, // 一次性展示几个
},
],
};
this.chart.setOption(option);
}, 2000);
}
}
if (val && val.length) {
// this.autoHover(this.chart, option, 6); // 参数分别为：容器，配置，轮播数量，轮播间隔时间
}
},
// 这里是关键，代表递归监听的变化
deep: true,
},
},
data() {
return {
chart: null,
timeTicket: null, //定时器
maxNum: 6, // 一次性展示几个。
timeId: null,
};
},
mounted() {
console.log(123);
this.$nextTick(() => {
this.initChart();
});
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart = null;
clearInterval(this.timeId);
this.timeId = null;
},
methods: {
autoHover(myChart, option, num, time = 2000) {
var count = 0; //计数器
if (this.timeTicket) {
clearInterval(this.timeTicket);
this.timeTicket = null;
}
this.timeTicket = setInterval(function () {
myChart.dispatchAction({
type: "downplay",
seriesIndex: 0, // serieIndex的索引值 可以触发多个
});
myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: count,
});
myChart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: count,
});
count++;
if (count >= num) {
count = 0;
}
}, time);
// myChart.on("mouseover", function(params) {
// // clearInterval(this.timeTicket);
// myChart.dispatchAction({
// type: "downplay",
// seriesIndex: 0
// });
// myChart.dispatchAction({
// type: "highlight",
// seriesIndex: 0,
// dataIndex: params.dataIndex
// });
// myChart.dispatchAction({
// type: "showTip",
// seriesIndex: 0,
// dataIndex: params.dataIndex
// });
// });
// myChart.on("mouseout", function() {
// // this.timeTicket && clearInterval(this.timeTicket);
// this.timeTicket = setInterval(function() {
// myChart.dispatchAction({
// type: "downplay",
// seriesIndex: 0 // serieIndex的索引值 可以触发多个
// });
// myChart.dispatchAction({
// type: "highlight",
// seriesIndex: 0,
// dataIndex: count
// });
// myChart.dispatchAction({
// type: "showTip",
// seriesIndex: 0,
// dataIndex: count
// });
// count++;
// if (count >= 17) {
// count = 0;
// }
// }, 3000);
// });
},
initChart() {
this.chart = this.$echarts.init(this.$refs.chart7);
const CubeLeft = this.$echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
},
buildPath: function (ctx, shape) {
const xAxisPoint = shape.xAxisPoint;
const c0 = [shape.x, shape.y];
const c1 = [shape.x - 9, shape.y - 9];
const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 9];
const c3 = [xAxisPoint[0], xAxisPoint[1]];
ctx
.moveTo(c0[0], c0[1])
.lineTo(c1[0], c1[1])
.lineTo(c2[0], c2[1])
.lineTo(c3[0], c3[1])
.closePath();
},
});
const CubeRight = this.$echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
},
buildPath: function (ctx, shape) {
const xAxisPoint = shape.xAxisPoint;
const c1 = [shape.x, shape.y];
const c2 = [xAxisPoint[0], xAxisPoint[1]];
const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9];
const c4 = [shape.x + 18, shape.y - 9];
ctx
.moveTo(c1[0], c1[1])
.lineTo(c2[0], c2[1])
.lineTo(c3[0], c3[1])
.lineTo(c4[0], c4[1])
.closePath();
},
});
const CubeTop = this.$echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
},
buildPath: function (ctx, shape) {
const c1 = [shape.x, shape.y];
const c2 = [shape.x + 18, shape.y - 9];
const c3 = [shape.x + 9, shape.y - 18];
const c4 = [shape.x - 9, shape.y - 9];
ctx
.moveTo(c1[0], c1[1])
.lineTo(c2[0], c2[1])
.lineTo(c3[0], c3[1])
.lineTo(c4[0], c4[1])
.closePath();
},
});
this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
this.$echarts.graphic.registerShape("CubeRight", CubeRight);
this.$echarts.graphic.registerShape("CubeTop", CubeTop);
let option = {
color: this.type == 1 ? color1 : color2,
legend: {
show: true,
type: "plain",
top: 0,
right: "5%",
itemHeight: this.fontSize(0.13), //图例图标的高度
itemWidth: this.fontSize(0.15), //图例图标的宽度
itemGap: this.fontSize(0.23), //图例图标与文字间的间距
orient: "horizontal",
textStyle: {
color: "rgba(255,255,255,0.7)",
fontSize: this.fontSize(0.13), // 字体大小
},
},
tooltip: {
show: true,
trigger: "axis", // 触发类型为坐标轴触发
textStyle: {
fontSize: this.fontSize(0.14), // 字体大小
},
formatter: function (params) {
// console.log(params, 798789);
let result = params[0].name + "<br>"; // 获取横轴对应的数据作为提示信息的标题
params.forEach(function (item) {
result += `${item.marker}${item.seriesName}：${Math.abs(
item.value
)}<br>`;
// + ' <br>' + + ': ' + formatNumber() + + ' ' // 对柱状图数据进行格式化
});
return result;
},
axisPointer: {
type: "none",
},
},
grid: {
top: 50,
bottom: 70,
left: 60,
right: 50,
// containLabel: true,
},
dataZoom: [
{
xAxisIndex: 0, //这里是从X轴的0刻度开始
show: false, //是否显示滑动条，不影响使用
type: "inside", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
startValue: 0, // 从头开始。
endValue: this.maxNum - 1, // 一次性展示几个
},
],
xAxis: {
type: "category",
// data: ["德州","德城区","陵城区","禹城市","乐陵市","临邑县","平原县","夏津县","武城县","庆云县","宁津县","齐河县"],
axisLine: {
show: true,
lineStyle: {
color: "#2384B1", //横轴颜色
width: this.fontSize(0.02), //横轴粗细
},
},
axisLabel: {
interval: 0,
rotate: 30,
formatter: function (params) {
var index = 7; // 当字符数超过6个时开始省略
return params.length > index
? params.substring(0, index) + "..."
: params;
},
textStyle: {
color: "#fff", // 横坐标颜色
fontSize: this.fontSize(0.12),
},
},
// offset: 20,
axisTick: {
show: false,
length: 9,
alignWithLabel: true,
lineStyle: {
color: "#7DFFFD",
},
},
},
yAxis: {
type: "value",
// min: 0,
minInterval: 1,
// 网格线
splitLine: {
show: true,
lineStyle: {
color: "#023052",
type: "dotted",
},
},
axisLine: {
show: false,
},
//坐标值标注
axisLabel: {
textStyle: {
color: "#fff",
fontSize: this.fontSize(0.15),
},
formatter: (value) => {
return Math.abs(value);
},
},
},
series: [
{
name: this.type == 1 ? "总人数" : "总车辆数",
type: "custom",
renderItem: function (params, api) {
const location = api.coord([api.value(0), api.value(1)]);
return {
type: "group",
children: [
{
type: "CubeLeft",
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0]),
},
style: {
fill: "rgba(47,102,192,.40)",
},
},
{
type: "CubeRight",
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0]),
},
style: {
fill: "rgba(59,128,226,.40)",
},
},
{
type: "CubeTop",
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0]),
},
style: {
fill: "rgba(72,156,221,.40)",
},
},
],
};
},
// data: MAX,
},
{
name: this.type == 1 ? "出勤人数" : "出勤车辆",
type: "custom",
renderItem: (params, api) => {
const location = api.coord([api.value(0), api.value(1)]);
return {
type: "group",
children: [
{
type: "CubeLeft",
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0]),
},
style: {
fill: new this.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: this.type == 1 ? color1[1] : color2[1],
},
{
offset: 1,
color: this.type == 1 ? color1[2] : color2[2],
},
]
),
},
},
{
type: "CubeRight",
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0]),
},
style: {
fill: new this.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: this.type == 1 ? color1[1] : color2[1],
},
{
offset: 1,
color: this.type == 1 ? color1[2] : color2[2],
},
]
),
},
},
{
type: "CubeTop",
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0]),
},
style: {
fill: new this.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: this.type == 1 ? color1[1] : color2[1],
},
{
offset: 1,
color: this.type == 1 ? color1[2] : color2[2],
},
]
),
},
},
],
};
},
// data: VALUE,
},
],
};
this.chart.setOption(option);
},
},
};
</script>
<style lang="sass" scoped>
@import "./css/rem.scss"
</style>
立体柱状图------多色渐变底部波纹动画
js
复制代码
let xData = ["2018年", "2019年", "2020年", "2021年"];
let color = [
"rgba(253, 221, 97, 1)",
"rgba(107, 255, 243, 1)",
"rgba(119, 191, 255, 1)",
"rgba(0, 72, 203,1)",
];
let data = [22, 33, 44, 55];
option = {
backgroundColor: "#000",
grid: {
top: "5%",
left: "10%",
right: "9%",
bottom: "40%",
},
xAxis: {
offset: 20,
data: xData,
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
textStyle: {
color: "#fff",
fontSize: 16,
},
},
},
yAxis: {
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
},
series: [
//'最低下的圆片',
{
name: "最低下的圆片",
stack: "a",
type: "effectScatter",
symbolSize: [62, 12],
symbolOffset: [0, 0],
z: 22,
data: [
{
name: "",
value: "0",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(253, 221, 97, 1)",
},
{
offset: 1,
color: "rgba(251, 171, 88, 1)",
},
]),
},
},
},
{
name: "",
value: "0",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(107, 255, 243, 1)",
},
{
offset: 1,
color: "rgba(8, 177, 255, 1)",
},
]),
},
},
},
{
name: "",
value: "0",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(119, 191, 255, 1)",
},
{
offset: 1,
color: "rgba(102, 155, 255, 1)",
},
]),
},
},
},
{
name: "",
value: "0",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(14, 195, 255, 1)",
},
{
offset: 1,
color: "rgba(0, 72, 203, 1)",
},
]),
},
},
},
],
},
//下半截柱状图
{
name: "下半截柱状图",
stack: "a",
type: "bar",
barWidth: 66,
z: 2,
barGap: "-100%",
data: [
{
name: "",
value: data[0],
itemStyle: {
normal: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: "linear",
global: false,
colorStops: [
{
//第一节下面
offset: 0,
color: "rgba(251, 171, 88, 0.8)",
},
{
offset: 1,
color: "rgba(253, 227, 100,0.8)",
},
],
},
},
},
},
{
name: "",
value: data[1],
itemStyle: {
normal: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: "linear",
global: false,
colorStops: [
{
//第二个柱状图下面
offset: 0,
color: "rgba(8, 177, 255, 0.8)",
},
{
offset: 1,
color: "rgba(107, 255, 243, 0.8)",
},
],
},
},
},
},
{
name: "",
value: data[2],
itemStyle: {
normal: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: "linear",
global: false,
colorStops: [
{
//第三个柱状图下半截
offset: 0,
color: "rgba(119, 191, 255, 0.8)",
},
{
offset: 1,
color: "rgba(102, 155, 255, 0.8)",
},
],
},
},
},
},
{
name: "",
value: data[3],
itemStyle: {
normal: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: "linear",
global: false,
colorStops: [
{
//第三个柱状图下半截
offset: 0,
color: "rgba(0, 72, 203,0.8)",
},
{
offset: 1,
color: "rgba(14, 195, 255, 0.8)",
},
],
},
},
},
},
],
},
//头部1
{
name: "头部1",
stack: "a",
type: "pictorialBar",
symbolSize: [66, 12],
symbolOffset: [0, -6],
z: 22,
data: [
{
name: "",
value: data[0],
symbolPosition: "end",
label: {
formatter: "{c} ",
color: "#fff",
offset: [0, -5],
show: true,
position: "top",
fontSize: 18,
fontWeight: 400,
fontFamily: "zcool-gdh",
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(251, 171, 88, 1)",
},
{
offset: 1,
color: "rgba(253, 227, 100, 1)",
},
],
false
),
},
},
},
{
name: "",
value: data[1],
symbolPosition: "end",
label: {
formatter: "{c}",
color: "#fff",
offset: [0, -5],
show: true,
position: "top",
fontSize: 18,
fontWeight: 400,
fontFamily: "zcool-gdh",
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(8, 177, 255, 1)",
},
{
offset: 1,
color: "rgba(107, 255, 243, 1)",
},
],
false
),
},
},
},
{
name: "",
value: data[2],
symbolPosition: "end",
label: {
formatter: "{c}",
color: "#fff",
offset: [0, -5],
show: true,
position: "top",
fontSize: 18,
fontWeight: 400,
fontFamily: "zcool-gdh",
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(119, 191, 255, 1)",
},
{
offset: 1,
color: "rgba(102, 155, 255, 1)",
},
],
false
),
},
},
},
{
name: "",
value: data[3],
symbolPosition: "end",
label: {
formatter: "{c}",
color: "#fff",
offset: [0, -5],
show: true,
position: "top",
fontSize: 18,
fontWeight: 400,
fontFamily: "zcool-gdh",
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(0, 72, 203, 1)",
},
{
offset: 1,
color: "rgba(14, 195, 255, 1)",
},
],
false
),
},
},
},
],
},
],
};
自动滚动表格
js
复制代码
<template>
<dv-scroll-board :config="type == 1 ? config : type == 2 ? config1 : config2" ref="scrollBoard" class="w100 h100" />
</template>
<script>
export default {
props: ["list", "type"],
watch: {
list: {
handler(val) {
console.log("list", val, this.type);
if (this.type == 3) {
}
},
// 这里是关键，代表递归监听的变化
deep: true
},
},
data() {
return {
config: {
header: ['所在单位', '车辆名称', '车辆属性', '车牌号', '车辆状态'],
data: [
['邗江支队', '50米水罐消防车', '水罐消防车', '苏K12345应急', '<span class="green1">正常</span>'],
['邗江支队', '50米水罐消防车', '水罐消防车', '苏K12345应急', '<span class="red1">维修</span>'],
['邗江支队', '50米水罐消防车', '水罐消防车', '苏K12345应急', '<span class="green1">正常</span>'],
['邗江支队', '50米水罐消防车', '水罐消防车', '苏K12345应急', '<span class="green1">正常</span>'],
],
align: ['center', 'center', 'center', 'center', 'center', 'center'],
rowNum: 7,
evenRowBGC: 'rgba(33, 78, 133,.5)',
oddRowBGC: 'transparent',
headerBGC: '',
headerHeight: '45'
},
config1: {
header: ['所在单位', '人员姓名', '职位', '联系方式', '人员状态'],
data: [
['邗江支队', '50米水罐消防车', '水罐消防车', '苏K12345应急', '<span class="green1">在岗</span>'],
['邗江支队', '50米水罐消防车', '水罐消防车', '苏K12345应急', '<span class="red1">其他</span>'],
['邗江支队', '50米水罐消防车', '水罐消防车', '苏K12345应急', '<span class="green1">在岗</span>'],
['邗江支队', '50米水罐消防车', '水罐消防车', '苏K12345应急', '<span class="yellow1">休假</span>'],
['邗江支队', '50米水罐消防车', '水罐消防车', '苏K12345应急', '<span class="blue1">出差</span>'],
['邗江支队', '50米水罐消防车', '水罐消防车', '苏K12345应急', '<span class="blue1">培训</span>'],
['邗江支队', '50米水罐消防车', '水罐消防车', '苏K12345应急', '<span class="green1">在岗</span>'],
['邗江支队', '50米水罐消防车', '水罐消防车', '苏K12345应急', '<span class="green1">在岗</span>'],
],
align: ['center', 'center', 'center', 'center', 'center', 'center'],
rowNum: 7,
evenRowBGC: 'rgba(33, 78, 133,.5)',
oddRowBGC: 'transparent',
headerBGC: '',
headerHeight: '45'
},
config2: {
header: ['值班类型', '姓名', '联系电话'],
data: [
['邗江支队', '50米水罐消防车', '水罐消防车'],
['邗江支队', '50米水罐消防车', '水罐消防车'],
['邗江支队', '50米水罐消防车', '水罐消防车'],
['邗江支队', '50米水罐消防车', '水罐消防车'],
],
align: ['center', 'center', 'center'],
rowNum: '',
evenRowBGC: 'rgba(0, 238, 255, 0.123)',
oddRowBGC: 'transparent',
headerBGC: '',
headerHeight: '40'
},
};
},
mounted() {
},
// 销毁定时器
beforeDestroy() {
},
methods: {
getTableData(arr) {
this.config.data = arr;
this.$refs['scrollBoard'].updateRows(arr, 0)
},
},
};
</script>
<style lang="scss" scoped>
@import "../components/css/rem.scss";
::v-deep.dv-scroll-board .header .header-item {
// color: #f39800;
// color: cyan;
color: #6fddc2;
font-weight: 700;
}
::v-deep.dv-scroll-board.solo .rows {
border: 1px solid rgba(0, 238, 255, 0.123);
}
::v-deep.dv-scroll-board .green1,
::v-deep.dv-scroll-board .red1,
::v-deep.dv-scroll-board .yellow1,
::v-deep.dv-scroll-board .blue1 {
padding: 4px 10px;
border-radius: 4px;
font-size: 12px;
}
::v-deep.dv-scroll-board .green1 {
border: 1px solid cyan;
background: rgba(0, 255, 255, .2);
}
::v-deep.dv-scroll-board .red1 {
border: 1px solid rgb(250, 13, 84);
background: rgba(250, 13, 84, .2);
}
::v-deep.dv-scroll-board .blue1 {
border: 1px solid rgb(0, 89, 255);
background: rgba(0, 89, 255, .2);
}
::v-deep.dv-scroll-board .yellow1 {
border: 1px solid rgb(250, 213, 2);
background: rgba(250, 213, 2, .2);
}
</style>
双折线图
js
复制代码
<template>
<div class="w100 h100" ref="chart"></div>
</template>
<script>
import resize from "./mixins/resize";
export default {
mixins: [resize],
props: ["list"],
watch: {
list: {
// 深度监听没有旧值
handler(val) {
var shiji = 60;
var seriesData = [];
seriesData.push({
value: shiji,
itemStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#ffffff",
},
{
offset: 1,
color: "yellow",
},
]),
},
});
let option = {
series: [
{},
{
detail: {
show: true,
},
data: seriesData,
},
{
endAngle: 220 - (260 * shiji) / 100,
},
],
};
this.chart.setOption(option);
},
// 这里是关键，代表递归监听的变化
deep: true,
},
},
data() {
return {
chart: null,
};
},
mounted() {
this.$nextTick(() => {
this.initChart(); // 体温
});
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart = null;
clearInterval(this.timeId);
this.timeId = null;
},
methods: {
// 体温
initChart() {
this.chart = this.$echarts.init(this.$refs.chart);
this.chart.setOption({
tooltip: {
show: false,
trigger: "item",
axisPointer: {
type: "line",
},
formatter: "{b} : {c}",
textStyle: {
fontSize: 20,
},
borderWidth: 10,
},
series: [
{
name: "刻度",
type: "gauge",
center: ["50%", "50%"],
radius: "82%",
min: 0, //最小刻度
max: 100, //最大刻度
splitNumber: 4, //刻度数量
startAngle: 220,
endAngle: -40,
axisLine: {
show: true,
lineStyle: {
width: 10,
color: [[1, "rgba(0,0,0,0)"]],
},
}, //仪表盘轴线
axisLabel: {
show: true,
color: "#8D98A6",
fontSize: 10,
distance: 5,
}, //刻度标签。
axisTick: {
show: true,
splitNumber: 10,
lineStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#ee9003",
},
{
offset: 1,
color: "#00ffff",
},
]),
width: 1,
// length:10
},
length: 5,
}, //刻度样式
splitLine: {
show: true,
length: 0,
lineStyle: {
color: "#00ffff",
width: 0,
},
}, //分隔线样式
},
{
type: "gauge",
radius: "100%",
center: ["50%", "50%"],
min: 0, //最小刻度
max: 100, //最大刻度
splitNumber: 0, //刻度数量
startAngle: 220,
endAngle: -40,
axisLine: {
show: true,
lineStyle: {
width: 10,
color: [
[
1,
new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "rgba(59,128,226,.2)",
},
{
offset: 1,
color: "rgba(59,128,226,.2)",
},
]),
],
],
},
},
//分隔线样式。
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
pointer: {
show: true,
length: "60%",
width: "2%",
},
title: {
show: false,
},
detail: {
show: false,
offsetCenter: [0, 30],
color: "#00ffff",
formatter: function (params) {
return params + "%";
},
textStyle: {
fontSize: this.fontSize(0.2),
fontWeight: 700,
},
},
// data: seriesData,
},
{
type: "gauge",
radius: "100%",
center: ["50%", "50%"],
min: 0, //最小刻度
max: 100, //最大刻度
splitNumber: 0, //刻度数量
startAngle: 220,
// endAngle: 220 - 260 * shiji / 100,
axisLine: {
show: true,
lineStyle: {
width: 10,
color: [
[
1,
new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "rgba(255, 51, 0, 1)",
},
{
offset: 0.5,
color: "rgba(254, 219, 101, 1)",
},
{
offset: 1,
color: "rgba(100, 222, 202, 1)",
},
]),
],
],
},
},
//分隔线样式。
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
pointer: {
show: true,
length: "60%",
width: "2%",
},
title: {
show: false,
},
detail: {
show: true,
offsetCenter: [0, 55],
color: "#62ddc2",
formatter: function (params) {
return "参与战斗率";
},
textStyle: {
fontSize: this.fontSize(0.12),
fontWeight: 700,
},
},
// data: seriesData,
},
],
});
},
},
};
</script>
<style lang="scss" scoped>
@import "./css/rem.scss";
.item {
width: 33%;
}
</style>
单条折线图
js
复制代码
<template>
<div class="w100 h100" ref="chart7"></div>
</template>
<script>
import resize from "./mixins/resize";
let color = [];
var color1 = ["rgba(47,102,192,.40)", "#00f562", "#a9f8c9"];
var color2 = ["rgba(47,102,192,.40)", "#f39800", "#f0e693"];
export default {
mixins: [resize],
props: ["list", "type"],
watch: {
list: {
handler(val) {
// const xAxisData = val.map(r => r.companyName); // x轴数据
// const MAX = val.map(r => r.containCount); // 总人数
// const VALUE = val.map(r => r.liveInCount); // 出勤人数
const xAxisData = [
"啥建档立卡九省联考解决解决",
"1月订单-13",
"1月订单-14",
"1月订单-3",
"1月订单-5",
"1月订单-6",
];
const MAX = [100, 100, 100, 100, 100, 100];
const VALUE = [70 - 11, 70 - 13, 70 - 14, 70 - 3, 70 - 5, 70 - 6];
// 深度监听没有旧值
let option = {
tooltip: {
show: true,
trigger: "axis", // 触发类型为坐标轴触发
},
xAxis: [
{
data: xAxisData,
},
],
series: [
{
data: MAX, // 总床位数
},
{
data: VALUE, // 在住人数
},
],
};
this.chart.setOption(option);
if (xAxisData.length > this.maxNum) {
let num = 0;
if (!this.timeId) {
this.timeId = setInterval(() => {
if (num + this.maxNum == xAxisData.length) {
num = 0;
} else {
num += 1;
}
let option = {
dataZoom: [
{
startValue: num, // 从头开始。
endValue: num + this.maxNum - 1, // 一次性展示几个
},
],
};
this.chart.setOption(option);
}, 2000);
}
}
if (val && val.length) {
// this.autoHover(this.chart, option, 6); // 参数分别为：容器，配置，轮播数量，轮播间隔时间
}
},
// 这里是关键，代表递归监听的变化
deep: true,
},
},
data() {
return {
chart: null,
timeTicket: null, //定时器
maxNum: 6, // 一次性展示几个。
timeId: null,
};
},
mounted() {
console.log(123);
this.$nextTick(() => {
this.initChart();
});
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart = null;
clearInterval(this.timeId);
this.timeId = null;
},
methods: {
autoHover(myChart, option, num, time = 2000) {
var count = 0; //计数器
if (this.timeTicket) {
clearInterval(this.timeTicket);
this.timeTicket = null;
}
this.timeTicket = setInterval(function () {
myChart.dispatchAction({
type: "downplay",
seriesIndex: 0, // serieIndex的索引值 可以触发多个
});
myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: count,
});
myChart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: count,
});
count++;
if (count >= num) {
count = 0;
}
}, time);
// myChart.on("mouseover", function(params) {
// // clearInterval(this.timeTicket);
// myChart.dispatchAction({
// type: "downplay",
// seriesIndex: 0
// });
// myChart.dispatchAction({
// type: "highlight",
// seriesIndex: 0,
// dataIndex: params.dataIndex
// });
// myChart.dispatchAction({
// type: "showTip",
// seriesIndex: 0,
// dataIndex: params.dataIndex
// });
// });
// myChart.on("mouseout", function() {
// // this.timeTicket && clearInterval(this.timeTicket);
// this.timeTicket = setInterval(function() {
// myChart.dispatchAction({
// type: "downplay",
// seriesIndex: 0 // serieIndex的索引值 可以触发多个
// });
// myChart.dispatchAction({
// type: "highlight",
// seriesIndex: 0,
// dataIndex: count
// });
// myChart.dispatchAction({
// type: "showTip",
// seriesIndex: 0,
// dataIndex: count
// });
// count++;
// if (count >= 17) {
// count = 0;
// }
// }, 3000);
// });
},
initChart() {
this.chart = this.$echarts.init(this.$refs.chart7);
const CubeLeft = this.$echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
},
buildPath: function (ctx, shape) {
const xAxisPoint = shape.xAxisPoint;
const c0 = [shape.x, shape.y];
const c1 = [shape.x - 9, shape.y - 9];
const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 9];
const c3 = [xAxisPoint[0], xAxisPoint[1]];
ctx
.moveTo(c0[0], c0[1])
.lineTo(c1[0], c1[1])
.lineTo(c2[0], c2[1])
.lineTo(c3[0], c3[1])
.closePath();
},
});
const CubeRight = this.$echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
},
buildPath: function (ctx, shape) {
const xAxisPoint = shape.xAxisPoint;
const c1 = [shape.x, shape.y];
const c2 = [xAxisPoint[0], xAxisPoint[1]];
const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9];
const c4 = [shape.x + 18, shape.y - 9];
ctx
.moveTo(c1[0], c1[1])
.lineTo(c2[0], c2[1])
.lineTo(c3[0], c3[1])
.lineTo(c4[0], c4[1])
.closePath();
},
});
const CubeTop = this.$echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
},
buildPath: function (ctx, shape) {
const c1 = [shape.x, shape.y];
const c2 = [shape.x + 18, shape.y - 9];
const c3 = [shape.x + 9, shape.y - 18];
const c4 = [shape.x - 9, shape.y - 9];
ctx
.moveTo(c1[0], c1[1])
.lineTo(c2[0], c2[1])
.lineTo(c3[0], c3[1])
.lineTo(c4[0], c4[1])
.closePath();
},
});
this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
this.$echarts.graphic.registerShape("CubeRight", CubeRight);
this.$echarts.graphic.registerShape("CubeTop", CubeTop);
let option = {
color: this.type == 1 ? color1 : color2,
legend: {
show: true,
type: "plain",
top: 0,
right: "5%",
itemHeight: this.fontSize(0.13), //图例图标的高度
itemWidth: this.fontSize(0.15), //图例图标的宽度
itemGap: this.fontSize(0.23), //图例图标与文字间的间距
orient: "horizontal",
textStyle: {
color: "rgba(255,255,255,0.7)",
fontSize: this.fontSize(0.13), // 字体大小
},
},
tooltip: {
show: true,
trigger: "axis", // 触发类型为坐标轴触发
textStyle: {
fontSize: this.fontSize(0.14), // 字体大小
},
formatter: function (params) {
// console.log(params, 798789);
let result = params[0].name + "<br>"; // 获取横轴对应的数据作为提示信息的标题
params.forEach(function (item) {
result += `${item.marker}${item.seriesName}：${Math.abs(
item.value
)}<br>`;
// + ' <br>' + + ': ' + formatNumber() + + ' ' // 对柱状图数据进行格式化
});
return result;
},
axisPointer: {
type: "none",
},
},
grid: {
top: 50,
bottom: 70,
left: 60,
right: 50,
// containLabel: true,
},
dataZoom: [
{
xAxisIndex: 0, //这里是从X轴的0刻度开始
show: false, //是否显示滑动条，不影响使用
type: "inside", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
startValue: 0, // 从头开始。
endValue: this.maxNum - 1, // 一次性展示几个
},
],
xAxis: {
type: "category",
// data: ["德州","德城区","陵城区","禹城市","乐陵市","临邑县","平原县","夏津县","武城县","庆云县","宁津县","齐河县"],
axisLine: {
show: true,
lineStyle: {
color: "#2384B1", //横轴颜色
width: this.fontSize(0.02), //横轴粗细
},
},
axisLabel: {
interval: 0,
rotate: 30,
formatter: function (params) {
var index = 7; // 当字符数超过6个时开始省略
return params.length > index
? params.substring(0, index) + "..."
: params;
},
textStyle: {
color: "#fff", // 横坐标颜色
fontSize: this.fontSize(0.12),
},
},
// offset: 20,
axisTick: {
show: false,
length: 9,
alignWithLabel: true,
lineStyle: {
color: "#7DFFFD",
},
},
},
yAxis: {
type: "value",
// min: 0,
minInterval: 1,
// 网格线
splitLine: {
show: true,
lineStyle: {
color: "#023052",
type: "dotted",
},
},
axisLine: {
show: false,
},
//坐标值标注
axisLabel: {
textStyle: {
color: "#fff",
fontSize: this.fontSize(0.15),
},
formatter: (value) => {
return Math.abs(value);
},
},
},
series: [
{
name: this.type == 1 ? "总人数" : "总车辆数",
type: "custom",
renderItem: function (params, api) {
const location = api.coord([api.value(0), api.value(1)]);
return {
type: "group",
children: [
{
type: "CubeLeft",
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0]),
},
style: {
fill: "rgba(47,102,192,.40)",
},
},
{
type: "CubeRight",
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0]),
},
style: {
fill: "rgba(59,128,226,.40)",
},
},
{
type: "CubeTop",
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0]),
},
style: {
fill: "rgba(72,156,221,.40)",
},
},
],
};
},
// data: MAX,
},
{
name: this.type == 1 ? "出勤人数" : "出勤车辆",
type: "custom",
renderItem: (params, api) => {
const location = api.coord([api.value(0), api.value(1)]);
return {
type: "group",
children: [
{
type: "CubeLeft",
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0]),
},
style: {
fill: new this.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: this.type == 1 ? color1[1] : color2[1],
},
{
offset: 1,
color: this.type == 1 ? color1[2] : color2[2],
},
]
),
},
},
{
type: "CubeRight",
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0]),
},
style: {
fill: new this.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: this.type == 1 ? color1[1] : color2[1],
},
{
offset: 1,
color: this.type == 1 ? color1[2] : color2[2],
},
]
),
},
},
{
type: "CubeTop",
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0]),
},
style: {
fill: new this.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: this.type == 1 ? color1[1] : color2[1],
},
{
offset: 1,
color: this.type == 1 ? color1[2] : color2[2],
},
]
),
},
},
],
};
},
// data: VALUE,
},
],
};
this.chart.setOption(option);
},
},
};
</script>
<style lang="sass" scoped>
@import "./css/rem.scss"
</style>
饼状图------自动轮训
js
复制代码
<template>
<div class="w100 h100">
<div class="w100 h100" ref="chart2Ref" />
</div>
</template>
<script>
import resize from "./mixins/resize";
let color = [
"#3f9eff",
"#04c6c3",
"#FCBB2A",
"#8a78ff",
"#1afcb0",
"#FF6A7A",
"#FF9337",
];
export default {
mixins: [resize],
props: ["list"],
watch: {
list: {
handler(val) {
let arr = val.map((item) => {
return {
name: item.date,
value: item.sugarAfterMeal,
};
});
let option = {
title: {
text: "起火原因统计（单位：起）", // 主标题文本内容
textStyle: {
color: "#fff", // 文本颜色
fontSize: this.fontSize(0.16), // 字体大小
fontWeight: "bold", // 字体粗细
},
},
legend: {
formatter: function (name) {
// 根据name获取对应的series数据项
var data = option.series[0].data.find(
(item) => item.name === name
);
return `${name} ${data.value}`;
},
},
series: [
{
data: arr,
},
],
};
this.pieChartData = arr;
this.chart.setOption(option);
// this.handleChartLoop(option)
},
// 这里是关键，代表递归监听的变化
deep: true,
},
},
data() {
return {
chart: null,
timer: null,
count: 0,
total: 0,
pieChartData: [],
};
},
mounted() {
this.$nextTick(() => {
this.initChart();
});
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
clearInterval(this.timer);
this.timer = null;
},
methods: {
init() {},
initChart() {
this.chart = this.$echarts.init(this.$refs.chart2Ref);
this.chart.clear(); // 每次清空上一次
clearInterval(this.timer); // 首次渲染清空计时器
this.timer = null;
this.chart.resize();
this.chart.setOption({
color: color,
tooltip: {
trigger: "item",
formatter: "{b} : {c} ({d}%)",
},
toolbox: {
show: false,
},
legend: {
show: true,
type: "scroll",
orient: "vertical", //horizontal
right: "10%", // 设置图例在右侧
top: "center",
// left: "center",
// top: "right",
itemWidth: 15,
itemHeight: 14,
textStyle: {
color: "#fff",
},
},
series: [
{
name: "",
type: "pie",
radius: ["45%", "65%"],
center: ["40%", "50%"],
// clockwise: false,
data: this.list,
label: {
show: false,
position: "center",
},
emphasis: {
label: {
show: true,
fontSize: "30",
fontWeight: "bold",
formatter: ["{a|{d}%}", "{b|{b}}"].join("\n"),
rich: {
a: {
// 中间字的数值样式
color: "#fff",
fontSize: this.fontSize(0.2),
lineHeight: 40,
verticalAlign: "bottom",
},
b: {
// 中间字的名称样式
color: "#fff",
// fontSize: "60%",
lineHeight: 28,
fontSize: this.fontSize(0.14),
},
},
},
},
},
],
});
// this.chart.setOption(option)
this.dysnTime();
this.chart.on("mouseover", (e) => {
clearInterval(this.timer);
this.timer = null;
this.chart.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: this.count,
});
if (e.dataIndex === this.count) {
this.chart.dispatchAction({
type: "highlight", // 启动高亮
seriesIndex: 0,
dataIndex: this.count,
});
}
});
this.chart.on("mouseout", (e) => {
this.dysnTime();
});
},
dysnTime() {
this.timer = setInterval(() => {
this.chart.dispatchAction({
type: "downplay", // 关闭高亮
seriesIndex: 0,
dataIndex: this.count,
});
this.count++;
if (this.count === this.pieChartData.length) {
this.count = 0;
}
this.chart.dispatchAction({
type: "highlight", // 启动高亮
seriesIndex: 0,
dataIndex: this.count,
});
}, 2000);
},
},
};
</script>
<style lang="scss" scoped>
@import "./css/rem.scss";
</style>
堆叠柱状图
js
复制代码
option = {
// tooltip: {
// trigger: 'axis',
// axisPointer: {
// type: 'shadow'
// },
// formatter: function (params) {
// console.log(params, 6666)
// return params[0].seriesName + '：' + params[0].value + '~' + (params[0].value + params[1].value);
// }
// },
grid: {
top: '8%',
left: '5%',
right: '5%',
bottom: '3%',
containLabel: true
},
dataZoom: [{
type: 'inside', // 内置型数据区域缩放
show: true,
startValue: 0,
endValue: 5,
}],
xAxis: {
type: 'category',
splitLine: {
show: false
},
data: this.data.time
},
yAxis: {
type: 'value',
min: 40,
},
series: [{
name: '舒张压范围',
type: 'bar',
stack: 'Total',
barWidth: 10,
itemStyle: {
borderColor: 'transparent',
color: 'transparent'
},
data: this.data.low1
},
{
name: '',
type: 'bar',
stack: 'Total',
barWidth: 10,
label: {
// show: true,
position: 'inside'
},
itemStyle: {
color: '#2bdc70', // 设置整个系列柱子的颜色为蓝色
barBorderRadius: 10 // 设置所有柱子的圆角半径为10px
},
data: this.data.high1
},
{
name: '收缩压范围',
type: 'bar',
stack: 'Total1',
barWidth: 10,
itemStyle: {
borderColor: 'transparent',
color: 'transparent',
},
data: this.data.low2
},
{
name: '',
type: 'bar',
stack: 'Total1',
barWidth: 10,
label: {
// show: true,
position: 'inside'
},
itemStyle: {
color: '#fa5151', // 设置整个系列柱子的颜色为蓝色
barBorderRadius: 10 // 设置所有柱子的圆角半径为10px
},
data: this.data.high2
}
]
};
散点图 ------ 带背景色
js
复制代码
let color = ["#36ceff", "#3ddb68", "#fcdc01", "#f5c577", "#ff7e00", "#f90102"]
option = {
color: color,
tooltip: {
show: false,
},
legend: {
bottom: "0",
width: '80%',
itemWidth: 10,
itemHeight: 10,
data: [{
name: "血压水平偏低",
icon: "roundRect",
},
{
name: "血压水平正常",
icon: "roundRect",
},
{
name: "血压水平偏高",
icon: "roundRect",
},
{
name: "1级高血压",
icon: "roundRect",
},
{
name: "2级高血压",
icon: "roundRect",
},
{
name: "3级高血压",
icon: "roundRect",
},
],
},
grid: {
left: "25",
right: "20",
bottom: "80",
top: "30",
containLabel: true,
},
xAxis: [{
type: "value",
name: "收缩压（mmHg）",
nameLocation: "middle",
nameGap: 30,
boundaryGap: false,
splitLine: {
show: false,
},
axisTick: {
show: false,
},
min: 60,
max: 260
}, ],
yAxis: [{
type: "value",
name: "舒张压（mmHg）",
nameLocation: "end",
splitLine: {
show: false,
},
axisTick: {
show: false,
},
min: 40,
max: 160
}, ],
series: [{
type: "line",
name: "血压水平偏低",
symbol: "none",
lineStyle: {
normal: {
width: 0,
color: color[0],
},
},
areaStyle: {
normal: {
color: color[0],
},
},
z: 10,
connectNulls: true,
data: [
[0, 60],
[85, 60],
],
},
{
type: "line",
name: "血压水平正常",
symbol: "none",
lineStyle: {
normal: {
width: 0,
color: color[1],
},
},
areaStyle: {
normal: {
color: color[1],
},
},
itemStyle: {},
z: 9,
connectNulls: true,
step: true,
data: [
[0, 80],
[120, 80],
],
},
{
type: "line",
name: "血压水平偏高",
symbol: "none",
lineStyle: {
normal: {
width: 0,
color: color[2],
},
},
areaStyle: {
normal: {
color: color[2],
},
},
z: 8,
data: [
[0, 90],
[140, 90],
],
},
{
type: "line",
name: "1级高血压",
symbol: "none",
lineStyle: {
normal: {
width: 0,
color: color[3],
},
},
areaStyle: {
normal: {
color: color[3],
},
},
z: 7,
data: [
[0, 100],
[160, 100],
],
},
{
type: "line",
name: "2级高血压",
symbol: "none",
lineStyle: {
normal: {
width: 0,
color: color[4],
},
},
areaStyle: {
normal: {
color: color[4],
},
},
z: 6,
data: [
[0, 110],
[180, 110],
],
},
{
type: "line",
name: "3级高血压",
symbol: "none",
lineStyle: {
normal: {
width: 0,
color: color[5],
},
},
areaStyle: {
normal: {
color: color[5],
},
},
z: 5,
data: [
[0, 160],
[260, 160],
],
},
{
type: "scatter",
symbol: "circle",
symbolSize: 5,
itemStyle: {
normal: {
color: "#000",
},
},
z: 20,
data: this.properties.list
},
],
};
饼状图------带边框的圆角，5.0以上版本，但是不兼容vue2
js
复制代码
option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
}
]
};