<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="./echarts.min.js"></script>
</head>
<body style="background-color:#151414">
<div id="main" style="width: 100%;height:600px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
option = {
color: ['rgba(50, 229, 255, 1)', 'rgba(250, 207, 18, 1)'],
tooltip: /*{
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},*/
{
trigger: 'axis',
show: true,
position: 'top',
//formatter: (params) => {},
textStyle:{
color: '#fff',
fontSize: 14,
lineHeight: 22,
},
backgroundColor: 'rgba(0,0,0,0.8)', // Semi-transparent black background
borderRadius: 5,
padding: [10, 15],
// offset: [0, -10],
borderColor: '#6F6F6F',
borderWidth: 1,
shadowBlur: 3,
shadowOffsetX: 0,
shadowOffsetY: 3,
},
grid: {
top: '30%',
left: '10%',
right: '10%',
bottom: '20%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['2017', '2018', '2019', '2020', '2021', '2022'],
axisLine: {
show: true,
lineStyle: {
color: '#7B68EE'
}
},
splitLine: {
show: false,
lineStyle: {
color: 'blue',
width: 1,
type: 'solid'
}
},
axisPointer: {
type: 'shadow'
},
}
],
yAxis: [
{
type: 'value',
name: `{legend|} {value|柱状图}`,
axisLabel: {
color: '#FF6347'
},
axisLine: {
show: true,
lineStyle: {
color: '#FFDEAD'
}
},
splitLine: {
show: false,
lineStyle: {
color: 'blue',
width: 1,
type: 'solid'
}
},
nameTextStyle: {
rich: {
legend: {
width: 12,
height: 4,
backgroundColor: '#EE82EE'
},
value: {
color: '#FF8C00'
}
}
}
},
{
type: 'value',
name: `{legend|} {value|折线图}(%)`,
axisLabel: {
color: '#00BFFF'
},
axisLine: {
show: true,
lineStyle: {
color: '#66CDAA'
}
},
splitLine: {
lineStyle: {
color: '#E6E6FA',
width: 1,
type: 'solid'
}
},
nameTextStyle: {
rich: {
legend: {
width: 12,
height: 4,
backgroundColor: '#87CEFA'
},
value: {
color: '#CD853F'
}
}
}
}
],
series: [
{
name: '柱状图1',
type: 'bar',
data: [80, 120, 110, 130, 120, 110],
barWidth: 14, // 柱状图的宽度
itemStyle: {
borderRadius: 8,
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{ offset: 0, color: 'rgba(50, 229, 255, 1)' },
{ offset: 1, color: 'rgba(50, 229, 255, 0.8)' }
])
}
},
{
name: '柱状图2',
type: 'bar',
data: [83, 167, 90, 100, 160, 110],
barWidth: 14, // 柱状图的宽度
itemStyle: {
borderRadius: 8,
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{ offset: 0, color: 'rgba(50, 229, 255, 1)' },
{ offset: 1, color: 'rgba(50, 229, 255, 0.8)' }
])
}
},
{
name: '折线图',
type: 'line',
yAxisIndex: 1,
data: [1, 0.6, 0.6, 1, 3, 0.1],
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: 'rgba(183, 75, 238)'
},
{
offset: 1,
color: 'rgba(250, 207, 18)'
}
])
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: 'rgba(183, 75, 238,0.2)'
},
{
offset: 1,
color: 'rgba(250, 207, 18)'
}
])
},
showSymbol: false
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
posted on
浙公网安备 33010602011771号