完整页面模板
<!--
THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=line-simple
-->
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var option;
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
</script>
</body>
</html>
最简配置
option = {
xAxis: {
type: 'category',
data: [2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018]
},
yAxis: {
type: 'value'
},
series: [{
data: [14, 6, 14, 12, 14, 20, 24, 16, 17, 20, 15, 26, 26, 33, 51, 49, 40, 80, 57],
type: 'line'
}]
};
标题
title: {
text: '雨量流量关系图',
subtext: '数据来自西安兰特水电测控技术有限公司',
left: 'center'
},
图例
legend: {
data: ['A', 'B', 'C']
},
边距
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
浮动提示
tooltip: {
trigger: 'axis',
formatter: "{a}<br/>{b}:{}%",
axisPointer: {
type: 'line', // 默认为直线，可选为：'line' | 'shadow'
lineStyle: {
color: 'rgba(0,0,0,0.2)',
width: 1,
type: 'solid'
}
}
},
坐标
xAxis: {
type: 'value',
axisLabel: {
formatter: '{value} °C'
}
},
yAxis: {
type: 'category',
axisLine: {onZero: false},
axisLabel: {
formatter: '{value} km'
},
boundaryGap: true,
data: ['0', '10', '20', '30', '40', '50', '60', '70', '80']
},
工具箱
toolbox: {
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
自定义单个元素
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, { // 将某个数据作为对象处理
value: 200,
itemStyle: {
color: '#a90000'
}
}, 150, 80, 70, 110, 130],
type: 'bar'
}]
};
自定义主题
- 下载或复制网站上编辑好的主题保存至
.js 文件；
- 将该文件在 HTML 中引用；
- 使用
echarts.init(dom, 'customed') 创建图表，第二个参数即为 .js 文件中注册的主题名字。