Echart例子-笔录
2021-12-08 本文已影响0人
色即是猫
横向术状图（颜色根据条件）
image.png
<template>
<div>
<!-- 今天巡检统计 -->
<el-card class="box-card myecharts">
<div slot="header" class="clearfix">
<span>健康度实时状态</span>
<!-- <el-button :class="this.selectedTime == 2? 'title2_tabs title2_tabs_on' : 'title2_tabs'" style="float: right; padding: 3px 0" type="text" @click="handleChange(2)">年</el-button>-->
<!-- <el-button :class="this.selectedTime == 1? 'title2_tabs title2_tabs_on' : 'title2_tabs'" style="float: right; margin-right:10px;padding: 3px 0" type="text" @click="handleChange(1)">月</el-button>-->
<!-- <el-button :class="this.selectedTime == 0? 'title2_tabs title2_tabs_on' : 'title2_tabs'" style="float: right; padding: 3px 0" type="text" @click="handleChange(0)">日</el-button>-->
</div>
<div class="text item">
<div id="data_health" style="width: 100%;height: calc(100vh - 690px)"></div>
</div>
</el-card>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
mounted() {
let myChart = echarts.init(document.getElementById("data_health"));
let option = {
grid: {
left: "15%",
top: "10%",
right: "3%",
bottom: "8%",
containLabel: false // 这个啥？看下面
},
yAxis: {
type: 'category',
data: ['W0101#AJ', 'W0103#AJ', 'W0105#AJ', 'W0107#AJ', 'W0109#AJ', 'W0111#AJ','W0101#BJ', 'W0103#BJ', 'W0105#BJ', 'W0107#BJ', 'W0109#BJ', 'W0111#BJ'],
axisLabel : {//坐标轴刻度标签的相关设置。
interval:0,
//rotate:"45",
},
},
xAxis: {
type: 'value',
nameTextStyle: {
},
minInterval : 1,
boundaryGap : [ 0, 0.01 ],
},
tooltip: {
// trigger: "axis",
// axisPointer : {
// lineStyle : {
// color: "#ffffff"
// }
// },
formatter: '健康值\n{b}：{c}分'
},
series: [
{
data: [24, 65, 45, 80, 70, 95, 63,24, 65, 45, 80, 70],
type: 'bar',
barWidth: '15',
itemStyle: {
normal: {
// 定制显示（按顺序）
color: function(params) {
var index_color = params.value;
if (index_color < 65) {
return '#a7d691';
} else if (index_color >= 65 && index_color < 75 ) {
return '#fbd379';
} else if (index_color >= 75 && index_color < 85) {
return '#fd9d75';
}else if (index_color >= 85 && index_color < 100) {
return '#f18585';
}else {
return '#ff4646';
}
},
// color: function(params) {
// var colorList = ['#768dd1', '#a7d691', '#fbd379', '#f18585', '#8fcde5', '#fd9d75', '#679df6', '#ffb65f', '#85c569', '#f87462', '#a5a5ef', '#f4e498' ];
// return colorList[params.dataIndex]
// },
label: {
show: true, //开启显示
position: 'right', //在上方显示
textStyle: { //数值样式
color: 'rgba(102, 102, 102, 0.5)',
fontSize: 16,
}
}
}
},
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}
]
};
myChart.setOption(option);
window.addEventListener('resize', () => {
myChart.resize();
})
},
}
</script>
<style lang="scss" scoped>
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
font-weight: bold;
}
.clearfix:after {
clear: both
}
.box-card {
width: 100%;
}
</style>
横向柱状图(指定数据到坐标轴的映射)
image.png
<template>
<div>
<!-- 今天巡检统计 -->
<el-card class="box-card myecharts">
<div slot="header" class="clearfix">
<span>健康度实时状态</span>
<!-- <el-button :class="this.selectedTime == 2? 'title2_tabs title2_tabs_on' : 'title2_tabs'" style="float: right; padding: 3px 0" type="text" @click="handleChange(2)">年</el-button>-->
<!-- <el-button :class="this.selectedTime == 1? 'title2_tabs title2_tabs_on' : 'title2_tabs'" style="float: right; margin-right:10px;padding: 3px 0" type="text" @click="handleChange(1)">月</el-button>-->
<!-- <el-button :class="this.selectedTime == 0? 'title2_tabs title2_tabs_on' : 'title2_tabs'" style="float: right; padding: 3px 0" type="text" @click="handleChange(0)">日</el-button>-->
</div>
<div class="text item">
<div id="data_health" style="width: 100%;height: calc(100vh - 690px)"></div>
</div>
</el-card>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
mounted() {
let myChart = echarts.init(document.getElementById("data_health"));
let option = {
dataset: {
source: [
['score', 'amount', 'name'],
[89.3, 582, 'w1001#AJ'],
[57.1, 782, 'w1003#AJ'],
[74.4, 410, 'w1005#AJ'],
[50.1, 127, 'w1007#AJ'],
[89.7, 201, 'w1009#AJ'],
[68.1, 791, 'w1011#AJ'],
[43.3, 370, 'w1001#BJ'],
[27.1, 261, 'w1003#BJ'],
[48.4, 731, 'w1005#BJ'],
[72.1, 156, 'w1007#BJ'],
[25.7, 241, 'w1009#BJ'],
[47.1, 356, 'w1011#BJ']
]
},
tooltip: {
position: 'top'
},
grid: {
top: 40,
width: '95%',
bottom: '0%',
left: 10,
containLabel: true
},
xAxis: {
name: '',
},
yAxis: {
type: 'category',
scale: true, //自适应
axisLabel:{
color: 'rgba(102,102,102,1)',
fontSize:12,
fontWeight: 'bold',
}
},
visualMap: {
orient: 'horizontal',
left: 'center',
top:0,
min: 10,
max: 100,
text: ['不及格', '优秀'],
// Map the score column to color
dimension: 0,
inRange: {
color: ['#73d781', '#FFCE34', '#fd7f5f']
}
},
series: [
{
type: 'bar',
encode: {
// Map the "amount" column to X axis.
x: 'amount',
// Map the "product" column to Y axis
y: 'name',
}
}
]
};
myChart.setOption(option);
window.addEventListener('resize', () => {
myChart.resize();
})
},
}
</script>
<style lang="scss" scoped>
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
font-weight: bold;
}
.clearfix:after {
clear: both
}
.box-card {
width: 100%;
}
</style>
多条数据散点图
image.png
<template>
<div>
<!-- 今天巡检统计 -->
<div slot="header" class="title_right_tabs">
<el-button :class="this.selectedTime == 2? 'title2_tabs title2_tabs_on' : 'title2_tabs'"
style="float: right; padding: 3px 0" type="text" @click="handleChange(2)">年
</el-button>
<el-button :class="this.selectedTime == 1? 'title2_tabs title2_tabs_on' : 'title2_tabs'"
style="float: right; margin-right:10px;padding: 3px 0" type="text" @click="handleChange(1)">月
</el-button>
<el-button :class="this.selectedTime == 0? 'title2_tabs title2_tabs_on' : 'title2_tabs'"
style="float: right; padding: 3px 0" type="text" @click="handleChange(0)">日
</el-button>
</div>
<div>
<div id="data_code_plot2" style="width: calc(100vw - 600px);height: 345px"></div>
</div>
</div>
</template>
<script>
import {getCodeCountByTime} from '@/api/ramp/home'
import echarts from 'echarts';
export default {
name: "Dashboard",
data(){
return{
selectedTime: 0,
// type:2 => 原始散点图
type: 2,
legends: [],
series: [],
myChart:{}
}
},
mounted() {
this.getOptionsAndDraw()
},
methods:{
draw(){
let myChart = echarts.init(document.getElementById('data_code_plot2'))
this.myChart = myChart
//var myChart = echarts.init(document.getElementById(“zhuzhuangtu”), ‘dark‘);//深色模式
let option = {
color: ['#768dd1', '#a7d691', '#fbd379', '#f18585', '#8fcde5', '#fd9d75', '#679df6', '#ffb65f', '#85c569', '#f87462', '#a5a5ef', '#f4e498'],
legend: {
data: this.legends,
left: 'center',
top: 0
},
tooltip: {
position: 'top'
},
grid: {
top: 40,
width: '90%',
bottom: '10%',
left: 10,
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']
}
],
yAxis: {},
series: this.series
}
myChart.setOption(option)
window.addEventListener('resize', () => {
myChart.resize();
})
},
getOptionsAndDraw(){
let param = {
time : this.selectedTime,
type: this.type
}
this.series = []
getCodeCountByTime(param).then(res => {
this.legends = res.data.codeList
for (let code of this.legends){
let option = {
name: code,
symbolSize: 20,
data: res.data.scatterDataMap[code],
type: 'scatter'
}
this.series.push(option)
}
this.draw()
})
},
handleChange(time){
console.log(time)
this.selectedTime = time
this.getOptionsAndDraw()
},
}
};
</script>
<style lang="scss" scoped>
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
font-weight: bold;
}
.clearfix:after {
clear: both
}
</style>
Echart多饼图例子
1、先看看效果图：
image.png
2、例子的全部代码
<template>
<div>
<div id="worksM" style="width: 100%;height: 180px;"></div>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
mounted() {
var myChart = echarts.init(document.getElementById("worksM"));
var option = {
legend: {},
tooltip: {},
dataset: {
source: [
['作业次数', '月度', '季度', '年度'],
['1号线', 86.5, 92.1, 85.7],
['2号线', 41.1, 30.4, 65.1],
['3号线', 24.1, 67.2, 79.5],
['4号线', 55.2, 67.1, 69.2],
['5号线', 55.2, 67.1, 69.2],
['其他', 55.2, 67.1, 69.2]
]
},
tooltip: {
trigger: 'item'
},
// 图例颜色 从右上开始
color:['#4466f4 ', '#db3476','#f475ff','#f2a941','#00dbff','#1ed9c3'],
legend: {
y : 'bottom',
left: 'center',
textStyle: {color: '#fff' },
itemWidth: 15, // 设置图例图形的宽
itemHeight: 10, // 设置图例图形的高
},
grid: {
//show:"true",
x: "12%",//x 偏移量
y: "0%", // y 偏移量
width: "100%", // 宽度
},
title:[
{
text: '',
x:'center',
y: 'top',
textStyle: {color: '#fff' },
},
{
subtext: '月度',//小标题
textStyle: {color: '#fff' },
left: '16.67%',
top: '0%',
textAlign: 'center'
},
{
subtext: '季度',//小标题
textStyle: {color: '#fff' },
left: '49%',
top: '0%',
textAlign: 'center'
},
{
subtext: '年度',//小标题
textStyle: {color: '#fffff' },
left: '82%',
top: '0%',
textAlign: 'center'
}
],
series: [
{
type: 'pie',
center: ['18%', '50%'],
encode: {
itemName: '作业次数',
value: '月度'
},
radius: ['30%', '60%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
formatter: '{d}%'+"\n"+'{b}'
},
emphasis: {
label: {
show: true,
fontSize: '14',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
},
//第二个/////////////////////////////////////
{
type: 'pie',
center: ['50%', '50%'],
encode: {
itemName: '作业次数',
value: '季度'
},
radius: ['30%', '60%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
formatter: '{d}%'+"\n"+'{b}'
},
emphasis: {
label: {
show: true,
fontSize: '14',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
},
//第三个/////////////////////////////////////
{
type: 'pie',
radius: '20%',
center: ['83%', '50%'],
encode: {
itemName: '作业次数',
value: '年度'
},
radius: ['30%', '60%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
formatter: '{d}%'+"\n"+'{b}'
},
emphasis: {
label: {
show: true,
fontSize: '14',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
}
],
};
myChart.setOption(option);
// 增加dispatchAction触发饼图自动切换效果//////start
let lastIndex = 0;
let currentIndex = 0;
setInterval(() => {
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: lastIndex,
});
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: currentIndex,
});
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: currentIndex,
});
lastIndex = currentIndex;
++currentIndex;
if(currentIndex > 5) {
currentIndex = 0;
}
}, 1000)
////// 增加dispatchAction触发饼图自动切换效果//////end
},
}
</script>
<style lang="scss" scoped>
</style>
增加自动切换效果
Video_2021-12-17_150902.gif
Echart堆叠曲线图##
image.png
完整代码：
<template>
<div>
<!-- 今天巡检统计 -->
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>今日转辙机巡检统计</span>
<el-button class="title2_tabs" style="float: right; padding: 3px 0" type="text">年</el-button>
<el-button class="title2_tabs" style="float: right; margin-right:10px;padding: 3px 0" type="text">月</el-button>
<el-button class="title2_tabs title2_tabs_on" style="float: right; padding: 3px 0" type="text">日</el-button>
</div>
<div class="text item">
<div id="dataToday" style="width: 100%;height: calc(100vh - 650px)"></div>
</div>
</el-card>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
name: "Dashboard",
mounted() {
var myChart = echarts.init(document.getElementById("dataToday"));
//var myChart = echarts.init(document.getElementById(“zhuzhuangtu”), ‘dark‘);//深色模式
var option = {
color:['#237de2','#519df2','#51aef2','#72bff7','#72d0f7','#72e0f7'],
tooltip : {
trigger: 'axis'
},
legend: {
data:['W0101','W0103','W0105','W0107','W0109','W0111']
},
// toolbox: {
// show : true,
// feature : {
// mark : {show: true},
// dataView : {show: true, readOnly: false},
// magicType : {show: true, type: ['stack', 'bar', 'line', 'tiled']},
// restore : {show: true},
// saveAsImage : {show: true}
// }
// },
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['00:00','01:00','02:00','03:00','04:00','05:00','06:00']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'W0101',
type:'line',
stack: '总量',
smooth:true,
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data:[10, 12, 21, 54, 260, 830, 710]
},
{
name:'W0103',
type:'line',
stack: '总量',
smooth:true,
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data:[30, 182, 434, 791, 390, 30, 10]
},
{
name:'W0105',
type:'line',
stack: '总量',
smooth:true,
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data:[1320, 1132, 601, 234, 120, 90, 20]
},
{
name:'W0107',
type:'line',
stack: '总量',
smooth:true,
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data:[40, 32, 51, 74, 160, 230, 510]
},
{
name:'W0109',
type:'line',
stack: '总量',
smooth:true,
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data:[640, 482, 234, 91, 190, 270, 470]
},
{
name:'W0111',
type:'line',
stack: '总量',
smooth:true,
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data:[482, 731, 553, 718, 28, 381, 602]
}
]
};
myChart.setOption(option);
},
};
</script>
<style lang="scss" scoped>
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
font-weight: bold;
}
.clearfix:after {
clear: both
}
.box-card {
width: 100%;
}
.mycard .el-card__header{
color: #666;
font-weight: bold;
background-color: #fff;
border-bottom: 0px solid #e6ebf5;
}
.mycount_box{
border: 0px #f0f0f0 solid;
border-radius: 10px;
padding: 20px 20px;
background-color: #00afff;
color: #fff;
margin: 10px auto;
}
.mycount_box2{
border: 0px #f0f0f0 solid;
border-radius: 10px;
padding: 10px 20px;
background-color: #73d781;
color: #fff;
margin: 10px auto;
}
.mycount_box3{
border: 0px #f0f0f0 solid;
border-radius: 10px;
padding: 20px 20px;
background-color: #ed6a76;
color: #fff;
margin: 10px auto;
}
.el-cascader--medium {
width: 100%;
}
.title2_tabs{
color: #666;
border-radius: 0;
border-bottom: 1px rgba(0,0,0,0) solid;
}
.title2_tabs:hover,.title2_tabs_on{
color: #189eff;
border-radius: 0;
border-bottom: 2px #189eff solid;
}
</style>
饼图##
image.png
完整代码：
<template>
<div>
<div id="data_account" style="width: 100%;height: calc(100vh - 650px)"></div>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
name: "Dashboard",
mounted() {
var myChart = echarts.init(document.getElementById("data_account"));
//var myChart = echarts.init(document.getElementById(“zhuzhuangtu”), ‘dark‘);//深色模式
var option = {
backgroundColor:'rgba(0,0,0,0)',
//图例颜色 从右上开始
color:['#f0d74f','#519df2','#51aef2','#f2a83e','#73d781','#237de2'],
title: {
text: "",
},
tooltip: {},
legend: {
data: ["销量"],
},
series : [
{
name: '访问来源',
type: 'pie',
radius: '55%',
data:[
{value:235, name:'W0101'},
{value:274, name:'W0103'},
{value:310, name:'W0105'},
{value:335, name:'W0107'},
{value:400, name:'W0109'},
{value:400, name:'W0111'}
],
roseType: 'angle',
itemStyle: {
normal: {
}
}
}
],
};
myChart.setOption(option);
// 增加dispatchAction触发饼图自动切换效果//////start
let lastIndex = 0;
let currentIndex = 0;
setInterval(() => {
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: lastIndex,
});
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: currentIndex,
});
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: currentIndex,
});
lastIndex = currentIndex;
++currentIndex;
if(currentIndex > 5) {
currentIndex = 0;
}
}, 1000)
////// 增加dispatchAction触发饼图自动切换效果//////end
},
};
</script>
<style lang="scss" scoped>
</style>
多组柱状图##
image.png
完整代码：
<template>
<div>
<div id="data_code" style="width: 100%;height: calc(100vh - 650px)"></div>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
name: "Dashboard",
mounted() {
var myChart = echarts.init(document.getElementById("data_code"));
//var myChart = echarts.init(document.getElementById(“zhuzhuangtu”), ‘dark‘);//深色模式
var option = {
color:['#237de2','#519df2','#51aef2','#72bff7','#72d0f7','#72e0f7'],
title: {
text: "",
},
tooltip: {},
legend: {
data:['0x0001','0x0002','0x0003','0x0004','0x0005','0x0006'],
},
xAxis: {
type : 'category',
data : ['00:00','01:00','02:00','03:00','04:00','05:00'],
},
yAxis: {},
series: [
{
name: "0x0001",
type: "bar",
barWidth:"8",
data: [5, 20, 36, 10, 10, 20],
},
{
name: "0x0002",
type: "bar",
barWidth:"8",
data: [14, 3, 22, 30, 16, 5],
},
{
name: "0x0003",
type: "bar",
barWidth:"8",
data: [13, 2, 17, 37, 21, 13],
},
{
name: "0x0004",
type: "bar",
barWidth:"8",
data: [31, 26, 11, 5, 21, 9],
},
{
name: "0x0005",
type: "bar",
barWidth:"8",
data: [41, 12, 16, 18, 31, 15],
},
{
name: "0x0006",
type: "bar",
barWidth:"8",
data: [28, 11, 42, 30, 16, 5],
},
],
};
myChart.setOption(option);
},
};
</script>
<style lang="scss" scoped>
</style>
单轴散点图##
image.png
完整代码：
<template>
<div>
<div id="data_code_plot" style="width: 100%;height: calc(100vh - 650px)"></div>
</div>
</template>
<script>
import echarts from 'echarts';
export default {
mounted() {
var myChart = echarts.init(document.getElementById("data_code_plot"));
var option;
// prettier-ignore
const hours = [
'00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00','24:00'
];
// prettier-ignore
const mycode = [ '0x0001', '0x0002', '0x0003','0x0004', '0x0005', '0x0006'];
// prettier-ignore
const data = [
[0, 0, 5], [0, 1, 1],[0, 2, 0], [0, 3, 0], [0, 4, 0],[0, 5, 0],[0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0],[0, 11, 2], [0, 12, 4],[0, 13, 1],[0, 14, 1],[0, 15, 3],[0, 16, 4],[0, 17, 6],[0, 18, 4],[0, 19, 4],[0, 20, 3],[0, 21, 3],[0, 22, 2],[0, 23, 5],
[1, 0, 7], [1, 1, 0],[1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, 6], [1, 17, 7], [1, 18, 8], [1, 19, 12], [1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2],
[2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3], [2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8], [2, 15, 10], [2, 16, 6], [2, 17, 5], [2, 18, 5], [2, 19, 5], [2, 20, 7], [2, 21, 4], [2, 22, 2], [2, 23, 4],
[3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4], [3, 12, 7], [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6], [3, 21, 4], [3, 22, 4], [3, 23, 1],
[4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3], [4, 23, 0],
[5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0],
];
const title = [];
const singleAxis = [];
const series = [];
mycode.forEach(function (mycode, idx) {
title.push({
textBaseline: 'middle',
top: ((idx + 0.5) * 100) / 7 + '%',
left:10,
text: mycode,
textStyle: {color: 'rgba(0,0,0,.8)',
fontSize: 14,
fontWeight: 'normal',
},
});
singleAxis.push({
left: 100,
type: 'category',
axisLine: { //x轴线
show: true,
lineStyle: {color: '#rgba(255,255,255,.8)'}
},
boundaryGap: false,
data: hours,
top: (idx * 100) / 7 + 5 + '%',
height: 100 / 7 - 10 + '%',
axisLabel: {
interval: 2
}
});
series.push({
singleAxisIndex: idx,
coordinateSystem: 'singleAxis',
type: 'scatter',
data: [],
symbolSize: function (dataItem) {
return dataItem[1] * 4;
}
});
});
data.forEach(function (dataItem) {
series[dataItem[0]].data.push([dataItem[1], dataItem[2]]);
});
// var myChart = echarts.init(document.getElementById("data_code_plot"));
//var myChart = echarts.init(document.getElementById(“zhuzhuangtu”), ‘dark‘);//深色模式
option = {
color:['#768dd1','#a7d691','#fbd379','#f18585','#8fcde5','#fd9d75'],
tooltip: {
position: 'top'
},
title: title,
singleAxis: singleAxis,
series: series
};
myChart.setOption(option);
},
}
</script>
<style lang="scss" scoped>
</style>
好用记得点赞支持哦。
