<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>echarts</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<style type="text/css">
.box{
width: 800px;
height:500px;
}
.box1{
width: 100%;
height:500px;
}
</style>
</head>
<body>
<div style="display: flex;justify-content: space-between;">
<div id="main1" class="box"></div>
<div id="main2" class="box"></div>
</div>
<div id="main3" class="box1"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/6.0.0/echarts.min.js"></script>
<script>
// 基于准备好的dom，初始化echarts实例
let dom1 = document.getElementById('main1')
let dom2 = document.getElementById('main2')
let dom3 = document.getElementById('main3')
let myChart1 = echarts.init(dom1,'vintage');//dark
let myChart2 = echarts.init(dom2,'vintage');//dark
let myChart3 = echarts.init(dom3,'vintage');//dark
let option1 = {
title: {//表头
text: 'ECharts 入门示例'
},
legend: {},//图例组件，不配置会在下面显示，功能是点击显示隐藏数据
tooltip: {},//提示框组件，浮窗
xAxis: {//x 轴
type: 'category',//坐标轴类型,类目轴 离散的类目数据
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子'],
axisLabel:{interval:0,rotate:30}//x轴角度
},
yAxis: {},//y 轴
//调色盘颜色列表，按照series顺序
color: ["#40A2FD", "#A4E790", "#FF8F37", "#F6D374", "#FF4837"],
dataset: {// 数据。
// 首行图例用，第一项对应x轴名称，后面是数据
source: [
['名称','2015', '2016', '2017','销量'],
['衬衫', 10, 20, 30, 40],
['羊毛衫', 100, 200, 300, 400],
['雪纺衫', 500, 600, 700, 800],
['裤子', 1000, 1100, 1200, 1300],
]
},
series: [//数值图形配置，这里的数据会覆盖dataset里的数据
{
type: 'bar',//柱图， （scatter气泡）
// name: '2015',
// data: [89.3, 92.1, 94.4, 85.4]
},
{
type: 'bar',
// name: '2016',
// data: [95.8, 89.4, 91.2, 76.9]
},
{
type: 'bar',
label: {
show: true, //显示
color: "#0099ff",
rotate: 90,//角度
position: 'insideBottom',//垂直居底
align: 'left',//垂直居底
verticalAlign: 'middle'//水平居中
},
// name: '2017',
// data: [97.7, 83.1, 92.5, 78.1]
},
{
type: 'line',//折线
// name: '销量',
// data: [5, 20, 36, 10, 10, 20]
}
],
/*
//气泡用
visualMap: {
show: false,
dimension: 2, // 指向第三列（列序号从 0 开始记，所以设置为 2）。
min: 2, // 需要给出数值范围，最小数值。
max: 15, // 需要给出数值范围，最大数值。
inRange: {
// 气泡尺寸：5 像素到 60 像素。
symbolSize: [5, 60]
}
},
*/
}
// myChart1.setOption(option1)
//柱图
let option2 = {
//提示框组件，浮窗，浮层，弹窗
tooltip: {
trigger: "axis",//坐标轴触发，主要在柱状图，折线图等
extraCssText: "box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);",
backgroundColor: "#3A4667", // 背景
borderColor: "#3A4667",
textStyle: {
color: "#fff",
},
axisPointer: {
type: "shadow",
},
},
//二维直角坐标系
grid: {
top: "22%",
left: "3%",
right: "3%",
bottom: "3%",
containLabel: true,//刻度标签,防止标签溢出
},
//调色盘颜色列表
color: ["#40A2FD", "#A4E790", "#F6D374", "#FF8F37", "#FF4837"],
//图例组件
legend: {
left: "center",
data: ["差错", "异常", "非停", "二类障碍", "一类障碍"],//图例的数据数组
itemWidth: 8,
itemHeight: 8,
textStyle: {
fontSize: 12, // 字体大小
color: "#72777B", // 字体颜色
},
top:0
},
//x 轴
xAxis: [
{
type: "category",//坐标轴类型,类目轴 离散的类目数据
data: [//x轴类目数据 category有效
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月",
],
splitLine: {//分隔线
show: false,//不显示
},
axisTick: {//坐标轴刻度
// x轴不要分割线
show: false,
},
axisLine: {//x轴轴线
lineStyle: {
type: "dashed",
color: "rgba(255,255,255,0.3)",
},
},
axisLabel: {//x轴刻度
color: "#72777B", // x轴文本颜色
fontSize: 13,
interval: 0,
// rotate: 45
},
},
],
//y 轴
yAxis: [
//第一个y轴
{
name: "",
nameGap: 10,//坐标轴名称与轴线之间的距离
type: "value",//坐标轴类型
splitLine: {//分隔线
show: true,
lineStyle: {
type: "dashed",
color: "#7BD5EC",
},
},
axisLabel: {//y轴刻度
color: "#72777B",
},
axisLine: {//y轴轴线
show: false,
},
axisTick: {//坐标轴刻度
show: false,
},
},
//可以设置第二个y轴，右侧记录总数
],
//数值图形配置
series: [
{
name: "差错",//对应图例的数据数组
type: "bar",//柱状图
barMaxWidth: 21,//柱条宽度
stack: "risk",//数据堆叠，同个类目轴上系列配置相同的 stack 值可以堆叠放置
data: [76, 195, 89, 150, 30],//数据值，接口获取后被替换
},
{
name: "异常",
type: "bar",
barMaxWidth: 21,
stack: "risk",
data: [124, 112, 98, 90, 70, 100, 100, 100],
},
{
name: "非停",
type: "bar",
barMaxWidth: 21,
stack: "risk",
data: [212, 168, 134, 124, 121, 100, 100, 100],
},
{
name: "二类障碍",
type: "bar",
barMaxWidth: 21,
stack: "risk",
data: [122, 68, 104, 214, 121, 100, 100, 100],
},
{
name: "一类障碍",
type: "bar",
barMaxWidth: 21,
stack: "risk",
data: [122, 68, 104, 214, 121, 100, 100, 100],
},
//可以设置折线图
{
name: "1号机负荷",
type: "line",
itemStyle: {
color: "#8979FF",
},
showSymbol: true,
areaStyle: {
//折线区域从上到下渐变色
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(137, 121, 255, 0.3)",
},
{
offset: 1,
color: "rgba(137, 121, 255, 0.05)",
},
]),
},
label: { show: false, color: "#363636" },
data: [122, 68, 104, 324, 265, 148, 442, 299],
},
],
};
// myChart2.setOption(option2)
//饼图
let option3 = {
color: ["#0687F2", "#FFBB38", "#878BFF", "#FF7F66"],
title: {
text: "风险个数",//上文字
subtext: "115",//下文字
left: "center",
top: "55%",//标题距顶距离
textStyle: {//上文字样式
fontSize: 13,
fontWeight: 400,
color: "#72777B",
},
subtextStyle: {//下文字样式
fontSize: 16,
fontWeight: 400,
color: "#393E44",
},
},
gird: {
containLabel: true,
},
legend: {
left: "center",
itemWidth: 8,
itemHeight: 8,
icon: "rect",
top:0,
data: ["已整改", "整改中", "未开始", "已超时"],
},
tooltip: {
trigger: "item",
// formatter: "{b}: {d}%", // 显示标签和百分比
},
series: [
{
name: "",
type: "pie",
radius: ["42%", "62%"], // 设置环形图的内外半径，空心圆
center: ["50%", "60%"],
roseType: "radius",
avoidLabelOverlap: true, // 改为true让echarts自动处理重叠
itemStyle: {
borderWidth: 0, // 去掉边框
borderColor: "#fff",
},
label: {
show: true,
position: "outside",
//值为0时可以更改文字
formatter: function(params) {
// 值为0时显示"无"，其他情况正常显示
if (params.value === 0) {
return `${params.name}: 0`;
}
return `${params.name}: ${params.value}`;
},
formatter: "{b}: {c}", // 标签内容
color: "#72777B",
},
labelLine: {
show: true,
},
emphasis: {
label: {
show: true,
fontSize: 12,
fontWeight: 'bold'
}
},
data: [
{ name: "已整改", value: 0 },
{ name: "整改中", value: 0 },
{ name: "未开始", value: 30 },
{ name: "已超时", value: 40 },
],
},
],
};
var option31 = {
title: {
text: '货类占比',
top: '40%',
left: '49%',
textAlign: 'center',
textStyle: {
fontSize: 20,
color: '#fff',
fontWeight: 400
}
},
tooltip: {
trigger: 'item',
confine: true,
backgroundColor: 'rgba(1, 19, 64, 0.9)',
borderColor: '#1FBCFF',
textStyle: {
color: '#fff',
},
},
series: [
{
type: 'pie',
radius: ['60%', '90%'],
padAngle: '2',
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
color: ['#3B97FF', '#FFC969', '#57F9E5', '#678CEF', '#92EA87', '#84CFF9', '#FF9898', '#91CC75', '#ffcc00', '#ff0000'],
data: [
{cargoTypeName: 'A类', value: 91.81},//value用数字
{cargoTypeName: 'B类', value: 2.76},
{cargoTypeName: 'C类', value: 1.57},
{cargoTypeName: 'D类', value: 0.44},
{cargoTypeName: 'E类', value: 0.42},
{cargoTypeName: 'F类', value: 0.06},
{cargoTypeName: 'G类', value: 0.47},
{cargoTypeName: 'H类', value: 0.08},
{cargoTypeName: 'I类', value: 0.01},
{cargoTypeName: 'J类', value: 0.00}
],
minAngle: 1, // 设置最小角度为1度，确保小数值也能显示
stillShowZeroSum: true, // 即使值为0也显示
avoidLabelOverlap: false, // 防止标签重叠的优化可能会隐藏小数据
}
],
};
// myChart1.setOption(option3)
//雷达图
const option4 = {
tooltip: {
show: true,
trigger: "item",
},
radar: {
axisName: {
color: '#BDE9FF',
padding:[15,15,15,15]
},
radius:'70%',
indicator: [
{ name: '未处理隐患', max: 100 },
{ name: '历史发生隐患', max: 100 },
{ name: '历史违章', max: 100 },
{ name: '设备缺陷', max: 100 },
{ name: '安全生产管理', max: 100 },
{ name: '人员数量', max: 100 },
{ name: '高危作业数量', max: 100 },
],
splitArea: {
show: false
},
axisLine: {
lineStyle: {
color: '#8FABBC'
}
},
},
series: [
{
name:'安全状态',
type: 'radar',
data: [
{
value: [87, 87, 87, 87, 95, 100, 87],
},
],
symbol: 'emptyCircle',
itemStyle:{
color:'#01BEFC'
},
label:{
show:true,
color:'#333333',
fontSize:16,
formatter: function (params) {
return params.value + '分';
}
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 1,
color: "rgba(0, 140, 255, 0.6)",
},
{
offset: 0,
color: "rgba(0, 140, 255, 0)",
},
]),
},
}
]
};
// myChart2.setOption(option4)
//在函数中更新，必须在外面先初始化一次
// getData()
function getData () {
let option = {
series: [{
data: [{
value: [70, 85, 86, 87, 90, 100, 97],
}]
}],
tooltip: {
show: true,
trigger: "item",
//自定义浮窗
formatter: function (params) {
// console.log(params)
let typeName = params.seriesName;
let value = params.value;
return `
<div style="margin: 0px 0 0;line-height:1;">
<div style="font-size:14px;color:#666;font-weight:400;line-height:1;">${typeName}</div>
<div style="margin: 10px 0 0;line-height:1;">
<div style="margin: 0px 0 0;line-height:1;">
<span style="display:inline-block;vertical-align:middle;margin-right:8px;margin-left:3px;border-radius:4px;width:4px;height:4px;background-color:#49EAC6;"></span>
<span style="font-size:14px;color:#666;font-weight:400;margin-left:2px">未处理隐患</span>
<span style="float:right;margin-left:20px;font-size:14px;color:#666;font-weight:900">${value[0]}个</span>
<div style="clear:both"></div>
</div>
<div style="margin: 10px 0 0;line-height:1;">
<span style="display:inline-block;vertical-align:middle;margin-right:8px;margin-left:3px;border-radius:4px;width:4px;height:4px;background-color:#49EAC6;"></span>
<span style="font-size:14px;color:#666;font-weight:400;margin-left:2px">历史发生隐患</span>
<span style="float:right;margin-left:20px;font-size:14px;color:#666;font-weight:900">${value[1]}个</span>
<div style="clear:both"></div>
</div>
<div style="margin: 10px 0 0;line-height:1;">
<span style="display:inline-block;vertical-align:middle;margin-right:8px;margin-left:3px;border-radius:4px;width:4px;height:4px;background-color:#49EAC6;"></span>
<span style="font-size:14px;color:#666;font-weight:400;margin-left:2px">历史违章</span>
<span style="float:right;margin-left:20px;font-size:14px;color:#666;font-weight:900">${value[2]}个</span>
<div style="clear:both"></div>
</div>
<div style="margin: 10px 0 0;line-height:1;">
<span style="display:inline-block;vertical-align:middle;margin-right:8px;margin-left:3px;border-radius:4px;width:4px;height:4px;background-color:#49EAC6;"></span>
<span style="font-size:14px;color:#666;font-weight:400;margin-left:2px">设备缺陷</span>
<span style="float:right;margin-left:20px;font-size:14px;color:#666;font-weight:900">${value[3]}个</span>
<div style="clear:both"></div>
</div>
<div style="margin: 10px 0 0;line-height:1;">
<span style="display:inline-block;vertical-align:middle;margin-right:8px;margin-left:3px;border-radius:4px;width:4px;height:4px;background-color:#49EAC6;"></span>
<span style="font-size:14px;color:#666;font-weight:400;margin-left:2px">安全生产管理</span>
<span style="float:right;margin-left:20px;font-size:14px;color:#666;font-weight:900">${value[4]}个</span>
<div style="clear:both"></div>
</div>
<div style="margin: 10px 0 0;line-height:1;">
<span style="display:inline-block;vertical-align:middle;margin-right:8px;margin-left:3px;border-radius:4px;width:4px;height:4px;background-color:#49EAC6;"></span>
<span style="font-size:14px;color:#666;font-weight:400;margin-left:2px">人员数量</span>
<span style="float:right;margin-left:20px;font-size:14px;color:#666;font-weight:900">${value[5]}人</span>
<div style="clear:both"></div>
</div>
<div style="margin: 10px 0 0;line-height:1;">
<span style="display:inline-block;vertical-align:middle;margin-right:8px;margin-left:3px;border-radius:4px;width:4px;height:4px;background-color:#49EAC6;"></span>
<span style="font-size:14px;color:#666;font-weight:400;margin-left:2px">高危作业数量</span>
<span style="float:right;margin-left:20px;font-size:14px;color:#666;font-weight:900">${value[6]}个</span>
<div style="clear:both"></div>
</div>
<div style="clear:both"></div>
</div>
<div style="clear:both"></div>
</div>
`;
}
}
}
//更新图表
myChart2.setOption(option)
}
//双y轴
const option5 = {
//提示框组件
tooltip: {
trigger: "axis",
extraCssText: "box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);",
backgroundColor: "#3A4667", // 背景
borderColor: "#3A4667",
textStyle: {
color: "#fff",
},
},
//二维直角坐标系
grid: {
top: "22%",
left: "3%",
right: "3%",
bottom: "3%",
containLabel: true,//刻度标签,防止标签溢出
},
//调色盘颜色列表
color: ["#1FBCFF", "#11E2B3", "#686DFF"],
//图例组件
legend: {
left: "center",
data: ["生产作业", "高危作业", "设备设施"],//图例的数据数组
itemWidth: 9,
itemHeight: 9,
textStyle: {
fontSize: 13, // 字体大小
color: "#72777B", // 字体颜色
},
top:0
},
//x 轴
xAxis: [
{
type: "category",//坐标轴类型,类目轴 离散的类目数据
data: ["一级", "二级", "三级", "四级"],//x轴类目数据 category有效
splitLine: {//分隔线
show: false,//不显示
lineStyle: {
color: ["#D4DFF5"],
},
},
axisTick: {//坐标轴刻度
// x轴不要分割线
show: false,
},
axisLine: {//x轴轴线
lineStyle: {
type: "solid",
color: "rgba(255,255,255,0.3)",
},
},
axisLabel: {//x轴刻度
color: "#72777B", // x轴文本颜色
fontSize: 13,
},
},
],
//y 轴
yAxis: [
//第一个y轴
{
type: "value",//坐标轴类型
splitLine: {//分隔线
show: true,
lineStyle: {
type: "dashed",
color: "rgba(114, 119, 123, 0.2)",
},
},
axisLabel: {//y轴刻度
color: "#72777B",
fontSize: 13,
},
axisLine: {//y轴轴线
show: false,
},
axisTick: {//坐标轴刻度
show: false,
},
},
//第二个y轴
{
name: "总数",//坐标轴名称
nameTextStyle: {//坐标轴名称文字样式
color: "#fff",
},
type: "value",//坐标轴类型
position: "right",//y 轴的位置
splitLine: {//分隔线
show: false,
},
axisLabel: {//y轴刻度
color: "#72777B",
},
axisLine: {//y轴轴线
show: false,
},
axisTick: {//坐标轴刻度
show: false,
},
},
],
//数值图形配置
series: [
{
name: "生产作业",//对应图例的数据数组
type: "bar",//柱状图
barWidth: 13,//柱条宽度
data: [76, 195, 89, 150, 30],//数据值
},
{
name: "高危作业",//对应图例的数据数组
type: "bar",//柱状图
barWidth: 13,//柱条宽度
data: [124, 112, 98, 90, 70],//数据值
},
{
name: "设备设施",//对应图例的数据数组
type: "bar",//柱状图
barWidth: 13,//柱条宽度
data: [212, 168, 134, 124, 121],//数据值
},
{
name: "总数",
type: "line",//折线图
yAxisIndex: 1,//多个 y轴时，指定所使用的 y 轴
showAllSymbol: false, //显示所有图形。
lineStyle: {//线条样式
color: "#FF9339",
},
areaStyle: {//区域填充样式,设置后显示成区域面积图
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 1,
color: "rgba(255, 147, 57, 0.25)",
},
{
offset: 0,
color: "rgba(255, 147, 57, 0)",
},
]),
},
itemStyle: {//折线拐点标志的样式
color: "#FF9339",
borderWidth: 1,
borderColor: "#fff",
},
data: [300, 450, 500, 555, 460],//数据值
},
],
};
// myChart1.setOption(option5)
//横向柱图
const option6 = {
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(1, 13, 19, 0.5)',
borderWidth: 0,
padding: 2,
textStyle: {
color: '#fff',
fontSize: 12,
},
axisPointer: {
type: 'shadow'
},
},
grid: {
left: "3%",
top: "10%",
right: "10%",
bottom: "2%",
containLabel: true,
},
legend: {
padding: [0, 20],
// icon: "circle",
left: 'right',
top: 10,
itemWidth: 8,
itemHeight: 8,
textStyle: {
color: "#333",
fontSize: 12,
},
},
dataZoom: [{
// 开启数据平移
type: 'slider', // 滑动条单独显示
show: true, // 是否显示滑动条
orient: 'vertical',
// yAxisIndex: [0],
start: 100, // 滚动条位置开始
end: 30,// 滚动条位置结束 当前展示x坐标下标为0-16，修改这里可以增加减少一屏显示的个数
width: 10, // 滑动条组件宽度
top: 36, // 滚动条位置定位
showDetail: false, // 拖拽时是否显示详情
showDataShadow: false,
fillerColor: '#B3CFFF', // 平移条的填充颜色
borderColor: 'transparent', // 边框颜色
zoomLock: true, // 锁定视图
brushSelect: false, // 不可缩放 滑动条默认是有手柄可以进行展示的内容区域缩放的，不太美观
// 通过该属性可以只滑动，不显示缩放功能
handleStyle: {
opacity: 0,
},
lineStyle: {
opacity: 0,
},
textStyle: {
fontSize: 0,
},
},
{
type: 'inside', // 添加内部缩放组件以支持鼠标滚轮
orient: 'vertical',
zoomOnMouseWheel: false, // 鼠标滚轮缩放
moveOnMouseWheel: true, // 鼠标滚轮平移
preventDefaultMouseMove: true
}],
yAxis: [{
type: 'category',
name: '公司名称',
nameGap: 14,
offset: 2,
nameTextStyle: {
fontSize: 13,
fontWeight: 500,
color: '#fff',
// align: 'right',
padding: [0, 0, 0, -70] // [上, 右, 下, 左]
},
data: [
'安徽省皖能股份有限公司1','安徽省天然气开发股份有限公司','安徽皖能环保股份有限公司','安徽省充换电有限责任公司','安徽皖能环境科技有限公司','安徽省皖能大厦有限责任公司',
'安徽省皖能股份有限公司','安徽省天然气开发股份有限公司','安徽皖能环保股份有限公司','安徽省充换电有限责任公司','安徽皖能环境科技有限公司','安徽省皖能大厦有限责任公司12'
].reverse(),//初始化顶部需要数据反转
splitLine: {
show: false,
lineStyle: {
color: ['#D4DFF5'],
},
},
axisTick: { // x轴不要分割线
show: false,
},
axisLine: {
lineStyle: {
type: 'dashed',
color: 'rgba(0,0,0,0.3)'
},
},
//设置文本过长超出隐藏...表示
axisLabel: {
show:true,
interval: 0,
color: '#333', // x轴文本颜色
fontSize: 12,
rotate: 0, // 设置X轴标签倾斜
margin: 8,
// align:'left',//文本对齐
// padding: [0, 0, 0, -165],//文本偏移
formatter:function(params){
var val="";
let length = 15
if(params.length >length){
val = params.substr(0,length)+'...';
return val;
}else{
return params;
}
}
},
}],
xAxis: [{
name: '数量',
type: 'value',
position: 'bottom',
nameTextStyle: {
color: '#333',
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: 'rgba(255,255,255,0.3)'
}
},
axisLabel: {
color: '#6ADAFE',
},
axisLine: {
show: true,
lineStyle: {
type: 'solid',
color: '#7BD5EC'
},
},
axisTick: {
show: false,
}
}],
series: [
{
name: "违章数量",
type: "bar",
// stack: 'total',
barWidth: 12,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: "#307ED5",
},
{
offset: 1,
color: '#47AEEA',
},
]),
barBorderRadius: 8,
},
data: [15, 39, 33, 30, 30, 30, 25, 39, 33, 30, 30, 30].reverse(),//初始化顶部需要数据反转
label: {//柱前文字
show: false,
// lineHeight: 10,
formatter: '{b}',
position: 'right',
color: 'white'
}
}]
}
// myChart1.setOption(option6)
//纵向柱图有横向滚动条
const option7 = {
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(1, 13, 19, 0.5)',
borderWidth: 0,
padding: 2,
textStyle: {
color: '#fff',
fontSize: 12,
},
axisPointer: {
type: 'shadow'
},
},
grid: {
left: "3%",
top: "15%",
right: "3%",
bottom: "10%",
containLabel: true,
},
legend: {
padding: [0, 20],
// icon: "circle",
left: 'right',
top: 10,
itemWidth: 8,
itemHeight: 8,
textStyle: {
color: "#333",
fontSize: 12,
},
},
dataZoom: [{
// 设置滚动条的隐藏与显示
show: true,
// 设置滚动条类型
type: "slider",
// 设置背景颜色
backgroundColor: "rgb(19, 63, 100)",
// 设置选中范围的填充颜色
fillerColor: "rgb(16, 171, 198)",
// 设置边框颜色
borderColor: "rgb(19, 63, 100)",
// 是否显示detail，即拖拽时候显示详细数值信息
showDetail: false,//比如滚动条顶部和底部的文字信息
// 数据窗口范围的起始数值
startValue: 0,
// 数据窗口范围的结束数值（一页显示多少条数据）
endValue: 8,//一屏柱子的数量，索引
// empty：当前数据窗口外的数据，被设置为空。
// 即不会影响其他轴的数据范围
filterMode: "empty",
// 设置滚动条宽度，相对于盒子宽度
width: "85%",
// 设置滚动条高度
height: 0,
// 设置滚动条显示位置
left: "center",
// 是否锁定选择区域（或叫做数据窗口）的大小
zoomLoxk: true,
// 控制手柄的尺寸
handleSize: 0,
// dataZoom-slider组件离容器下侧的距离
bottom: 16,
},
{
// 没有下面这块的话，只能拖动滚动条，
// 鼠标滚轮在区域内不能控制外部滚动条
type: "inside",
// 滚轮是否触发缩放
zoomOnMouseWheel: false,
// 鼠标滚轮触发滚动
moveOnMouseMove: true,
moveOnMouseWheel: true,
}],
xAxis: [{
type: 'category',
name: '',
nameGap: 14,
offset: 2,
nameTextStyle: {
fontSize: 13,
fontWeight: 500,
color: '#333',
// align: 'right',
padding: [0, 0, 0, -70] // [上, 右, 下, 左]
},
data: [
'皖能股份','安徽天然气','皖能环保','安徽充换电','皖能环境','皖能大厦',
'皖能股份','安徽天然气','皖能环保','安徽充换电','皖能环境','皖能大厦',
],
splitLine: {
show: false,
lineStyle: {
color: ['#D4DFF5'],
},
},
axisTick: { // x轴不要分割线
show: false,
},
axisLine: {
lineStyle: {
type: 'dashed',
color: 'rgba(0,0,0,0.3)'
},
},
//设置文本过长超出隐藏...表示
axisLabel: {
show:true,
interval: 0,
color: '#333', // x轴文本颜色
fontSize: 12,
rotate: 0, // 设置X轴标签倾斜
margin: 8,
// align:'center',//文本对齐
// padding: [0, 0, 0, -165],//文本偏移
formatter:function(params){
var val="";
let length = 15
if(params.length >length){
val = params.substr(0,length)+'...';
return val;
}else{
return params;
}
}
},
}],
yAxis: [{
name: '数量',
type: 'value',
nameTextStyle: {
color: '#333',
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: 'rgba(255,255,255,0.3)'
}
},
axisLabel: {
color: '#6ADAFE',
},
axisLine: {
show: true,
lineStyle: {
type: 'solid',
color: '#7BD5EC'
},
},
axisTick: {
show: false,
}
}],
series: [
{
name: "违章数量",
type: "bar",
// stack: 'total',
barWidth: 20,//柱粗
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "#307ED5",
},
{
offset: 1,
color: '#47AEEA',
},
]),
barBorderRadius: 2,
},
data: [15, 39, 33, 30, 30, 30, 25, 39, 33, 30, 30, 30],
label: {//柱前文字
show: false,
// lineHeight: 10,
formatter: '{b}',
position: 'right',
color: 'white'
}
},
]
}
// myChart2.setOption(option7)
const option8 = {
tooltip: {
trigger: "axis",
extraCssText: "box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);",
backgroundColor: "#3A4667", // 背景
borderColor: "#3A4667",
textStyle: {
color: "#fff",
},
confine: true,
},
grid: {
top: "22%",
left: "3%",
right: "3%",
bottom: "3%",
containLabel: true,
},
legend: {
left: "center",
data: ["1号机负荷", "2号机负荷"],
itemWidth: 11,
itemHeight: 8,
textStyle: {
fontSize: 12, // 字体大小
color: "#72777B", // 字体颜色
},
top:0
},
xAxis: [
{
type: "category",
data: (function() {
// 生成5分钟间隔的时间点
const times = [];
for (let hour = 0; hour < 24; hour++) {
for (let minute = 0; minute < 60; minute += 5) {
const hourStr = hour.toString().padStart(2, '0');
const minuteStr = minute.toString().padStart(2, '0');
times.push(`${hourStr}:${minuteStr}`);
}
}
return times;
})(),
splitLine: {
show: false,
},
axisTick: {
// x轴不要分割线
show: false,
},
axisLine: {
lineStyle: {
type: "dashed",
color: "rgba(255,255,255,0.3)",
},
},
axisLabel: {
color: "#72777B", // x轴文本颜色
fontSize: 13,
interval: 11, // 每12个显示一个（每小时显示一个）
formatter: function(value, index) {
// 只显示整点时间
if (value.endsWith(':00') || index === 0 || index === 287) {
return value;
}
return '';
}
},
},
],
yAxis: [
{
name: "单位:MV",
nameGap: 10,
type: "value",
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "#72777B",
},
},
axisLabel: {
color: "#72777B",
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
],
series: [
{
name: "1号机负荷",
type: "line",
itemStyle: {
color: "#8979FF",
},
symbol: 'none',//去掉圆点
lineStyle: {//折线粗细
width: 1
},
showSymbol: true,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(137, 121, 255, 0.3)",
},
{
offset: 1,
color: "rgba(137, 121, 255, 0.05)",
},
]),
},
label: { show: false, color: "#363636" },
data: [
122, 135, 118, 142, 128, 155, 68, 122, 135, 118, 142, 128, 155, 68, 122, 135, 118, 142, 128, 155, 68,
75, 82, 68, 74, 85, 90, 104, 75, 82, 68, 74, 85, 90, 104, 75, 82, 68, 74, 85, 90, 104,
110, 125, 135, 142, 155, 168, 324,110, 125, 135, 142, 155, 168, 324,110, 125, 135, 142, 155, 168, 324,
310, 295, 328, 315, 305, 298, 265,310, 295, 328, 315, 305, 298, 265,310, 295, 328, 315, 305, 298, 265,
280, 255, 245, 260, 248, 235, 148,280, 255, 245, 260, 248, 235, 148,280, 255, 245, 260, 248, 235, 148,
160, 175, 190, 205, 225, 240, 442,160, 175, 190, 205, 225, 240, 442,160, 175, 190, 205, 225, 240, 442,
420, 398, 415, 385, 365, 345, 299,420, 398, 415, 385, 365, 345, 299,420, 398, 415, 385, 365, 345, 299
],
},
{
name: "2号机负荷",
type: "line",
itemStyle: {
color: "#42B8FF",
},
symbol: 'none',//去掉圆点
lineStyle: {//折线粗细
width: 1
},
showSymbol: true,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(66, 184, 255, 0.3)",
},
{
offset: 1,
color: "rgba(66, 184, 255, 0.05)",
},
]),
},
label: { show: false, color: "#363636" },
data: [
75, 82, 68, 74, 85, 90, 104, 75, 82, 68, 74, 85, 90, 104, 75, 82, 68, 74, 85, 90, 104,
160, 175, 190, 205, 225, 240, 442,160, 175, 190, 205, 225, 240, 442,160, 175, 190, 205, 225, 240, 442,
110, 125, 135, 142, 155, 168, 324,110, 125, 135, 142, 155, 168, 324,110, 125, 135, 142, 155, 168, 324,
122, 135, 118, 142, 128, 155, 68, 122, 135, 118, 142, 128, 155, 68, 122, 135, 118, 142, 128, 155, 68,
310, 295, 328, 315, 305, 298, 265,310, 295, 328, 315, 305, 298, 265,310, 295, 328, 315, 305, 298, 265,
420, 398, 415, 385, 365, 345, 299,420, 398, 415, 385, 365, 345, 299,420, 398, 415, 385, 365, 345, 299,
280, 255, 245, 260, 248, 235, 148,280, 255, 245, 260, 248, 235, 148,280, 255, 245, 260, 248, 235, 148,
],
},
],
};
// myChart3.setOption(option8)
//圆柱体图表
const option9 = {
tooltip: {
show: false
},
grid: {
top: '24%',
left: '8%',
right: '2%',
bottom: '3%',
containLabel: true
},
legend: {
top: 2,
left: 'center',
itemWidth: 8,
itemHeight: 8,
textStyle: {
fontSize: 13, // 字体大小
color: '#72777B' // 字体颜色
}
},
xAxis: [
{
type: 'category',
data: ['部门1', '部门2', '部门3', '部门4', '部门5', '部门6'],
splitLine: {
show: false
},
axisTick: {
// x轴不要分割线
show: false
},
axisLine: {
show: false
},
axisLabel: {
color: '#3C3C3C', // x轴文本颜色
fontSize: 14,
interval: 0
}
}
],
yAxis: [
{
name: '作业数量：个',
nameTextStyle: {
fontSize: 14,
color: '#8E8E93'
},
type: 'value',
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: 'rgba(0, 0, 0, 0.15)'
}
},
axisLabel: {
color: '#8E8E93',
fontSize: 13
},
axisLine: {
show: false
},
axisTick: {
show: false
}
}
],
series: [
{
//柱底圆片
name: '',
type: 'pictorialBar',
symbolSize: [36, 20], //调整截面形状
symbolOffset: [0, 10],
symbol: 'diamond',
z: 12,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#E9BA7B'
},
{
offset: 1,
color: '#FFF2E6'
}
])
},
data: [100, 75, 105, 26, 52, 48]
},
//柱体
{
name: '',
type: 'bar',
barWidth: '36',
label: {
show: true,
position: 'top',
fontSize: 14,
color: 'rgba(0, 0, 0, 0.7)',
offset: [0, -15]
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#EFCB9B'
},
{
offset: 1,
color: 'rgba(239, 203, 155, 0.4)'
}
])
},
data: [100, 75, 105, 26, 52, 48]
},
//柱顶圆片
{
name: '',
type: 'pictorialBar',
symbolSize: [36, 21], //调整截面形状
symbolOffset: [0, -10],
symbol: 'diamond',
z: 12,
symbolPosition: 'end',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#E9BA7B'
},
{
offset: 1,
color: '#FFF2E6'
}
])
},
data: [100, 75, 105, 26, 52, 48]
}
]
}
</script>
<script>
更新的方法：
let myChart = renderMyChart()
function renderMyChart () {
let chartContainer = document.getElementById('chart1');
let chart = echarts.init(chartContainer);
const option = {...}
option && chart.setOption(option);
return chart;
}
myChart.on('click', function (params) {
console.log(params)
});
function getData(){
$.ajax({
url,
type: 'GET',
success: (res) => {
let xData = res.data.map(item => item.short_name);
const seriesData = res.data.map(item => item.nums)
myChart.setOption({
xAxis: { data: xData },
series: [
{ data: seriesData },
]
})
},
error: (err) => {
console.log(err);
}
})
}
vue3:
charts-options.ts:
import type { EChartsOption } from "echarts";
export const myOptions: EChartsOption = {
tooltip:{...},
xAxis:{...},
yAxis:{...},
series:{...}
}
import chartWrapper from "@/components/chartWrapper.vue";
import {myOptions} from "@/data/charts-options";
<chartWrapper ref="myChartRef" :height="'200px'" :options="myOptions" :on-item-click="handleClick"/>
// 定义暴露类型
type EChartExpose = {
resize: () => void;
update: (newOptions: any, replaceMerge?: string[]) => void;
};
const myChartRef = ref<EChartExpose | null>(null);
const handleClick = (item) => {
console.log(item)
}
//获取数据待修改
let getData1 = async () => {
const res = await request("get", {
params: {
firstPath: "magic_api",
secondPath: "wn/jt/lsd",
thirdPath:'lsd_violation_statistics',
},
});
const data = res.data.data;
const seriesData1 = data.map(item => item.short_name)
const seriesData2 = data.map(item => item.nums)
//方式1
const options = {
xAxis: { data: seriesData1 },
series: [
{ data: seriesData2 }
]
}
myChartRef.value?.update(options)
//方式2
nextTick(()=>{
let option = {
series: [{
data: [{
value: [45, 85, 86, 87, 90, 100, 97],
}]
}]
};
//更新图表
myChartRef.value!.update(option)
})
};
</script>
chartWrapper.vue
----------------组件start--------------------------
<template>
<div ref="chartDom" :style="{ width, height }" @click="handleClick(vall)"></div>
</template>
<script setup lang="ts">
import { onMounted, ref, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
let vall = ref(null)
const props = defineProps({
options: Object,
width: { type: String, default: "100%" },
height: { type: String, default: "300px" },
onItemClick: {type:Function,required:false},
});
const chartDom = ref<HTMLElement>();
let chartInstance: echarts.ECharts | null = null;
const handleResize = () => {
chartInstance?.resize()
}
onMounted(() => {
chartInstance = echarts.init(chartDom.value!);
chartInstance.setOption(props.options!);
window.addEventListener('resize', handleResize)
chartInstance.on('click', function(params) {
// 控制台打印数据的名称
// console.log(params.componentType,params.seriesType,params.dataType);
if (params.componentType === 'series') {
// console.log('点击了柱状图');判断不生效，点击过1次再点击空白处还是会返回上次的值
vall = {
name: params.name,
value: params.value,
seriesName: params.seriesName,
dataIndex: params.dataIndex,
seriesType: params.seriesType
}
}
});
chartInstance.on('legendselectchanged', function (event) {
// event.name 是被点击的图例项的名字
// console.log('图例被点击，图例项名称:', event.name);
vall.tuli = event.name
vall.tulizt = event.selected
});
});
onBeforeUnmount(() => {
window.removeEventListener('resize', handleResize)
})
defineExpose({
resize: () => chartInstance?.resize(),
update: (newOptions: any, replaceMerge: string[] = []) =>
chartInstance?.setOption(newOptions, {
replaceMerge,
}),
});
//防御性检查
const handleClick = (vall) => {
// 检查 onItemClick 是否存在且是函数
if (typeof props.onItemClick === 'function') {
props.onItemClick(vall)
} else {
// 或者使用默认行为
//console.log('默认点击处理:', vall)
}
}
</script>
----------------组件end--------------------------
</body>
</html>
浙公网安备 33010602011771号