echarts折线图案例基于echarts-plain.js
程序员文章站
2022-06-07 20:06:06
...
最近接触前端,要写个报表,但是由于公司用的是echarts-plain.js,导致我在网上找到的许多属性设置的东西由于就是不同而失去作用.
使用echarts-plain.js时,dataView不会显示表格,只会显示文字.如果想要显示表格的话,需要自己动手写一个方法,动态加载表格.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- 引入 echarts.js -->
<script src="js/echarts-plain.js"></script>
<!-- <script src="js/echarts.js"></script>-->
</head>
<body>
<div id="main" style="width: 1800px;height:800px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
backgroundColor: '#000000', //背景颜色
title: {
text: '未来一周气温变化', //主标题
subtext: '纯属虚构', //副标题
x: 'center', //标题位置,center中间,left左,right右
textStyle: { //设置主标题风格
color: '#FFFF00' //设置主标题字体颜色
// fontStyle:1//主标题文字风格
}
},
tooltip: {
trigger: 'axis'
},
legend: {
// orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
orient: 'horizontal',
// x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
x: 'center',
// y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
y: 'bottom',
data: ['最高气温', '最低气温']
},
//图表的位置
grid: {
y: '10%', // 等价于 y: '16%'
left: '3%',
right: '10%',
y2: '16%',
containLabel: true
},
toolbox: {
show: true,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
calculable: true,
xAxis: [{
type: 'category',
//x轴属性设置
axisLine: {
lineStyle: {
// 设置x轴颜色
color: '#912CEE'
}
},
// 设置X轴刻度数据属性设置
axisLabel: {
textStyle: {
color: '#912CEE'
},
rotate: 0, // 旋转角度
interval: 0 //设置X轴数据间隔几个显示一个，为0表示都显示
},
// boundaryGap值为false的时候，折线第一个点在y轴上
boundaryGap: false,
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}],
yAxis: [{
name: '温度',
type: 'value',
max: 50,
min: -10,
//y轴属性设置
axisLine: {
lineStyle: {
// 设置y轴颜色
color: '#87CEFA'
}
},
//y轴刻度数据属性设置
axisLabel: {
textStyle: {
color: '#87CEFA'
},
show: true,
interval: 'auto',
formatter: '{value} °C'
}
}],
series: [{
name: '最高气温',
type: 'line',
data: [11, 11, 15, 13, 12, 13, 10],
markPoint: {
data: [{
type: 'max',
name: '最大值'
},
{
type: 'min',
name: '最小值'
}
]
},
markLine: {
data: [{
type: 'average',
name: '平均值'
}]
}
},
{
name: '最低气温',
type: 'line',
data: [1, -2, 2, 5, 3, 2, 0],
markPoint: {
data: [{
name: '周最低',
value: -2,
xAxis: 1,
yAxis: -1.5
}]
},
markLine: {
data: [{
type: 'average',
name: '平均值'
}]
}
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
</script>
</body>
</html>
上一篇： *简单快速理解类和对象
下一篇： 97条3ds Max 常见问题解答整理