Table of contents
1.JavaScript source code running file to run the code
2. A text editor such as notepad++ is required
1. Preview of renderings
2. Preparation
1.JavaScript source code running file to run the code
Need to download the running file yourself
https://pan.baidu.com/s/1shmtM36HgRqC0S1OXpNWpg?pwd=yozs
2. A text editor such as notepad++ is required
A useful text editor can make editing and error checking more convenient. Of course, you can also use Notepad for editing.
3. Write image attribute code
1. Editing interface preview
2. Complete code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<!-- //图形在网页的长宽 DOM -->
<div id="main" style="width: 1000px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
legend: {
type:'plain',
show:true,
data: [':2013'],
bottom:30,
left:150,
x:'left',
},
grid: {
containLabel: true
},
xAxis:
[{
type:'category',
data:['2012-12-13','2014-12-13','2015-12-13','2016-12-13','2017-12-13','2018-12-13','2019-12-13','2020-12-13'],
axisTick:{
show:false,
},
},
{
type:'category',
position:'bottom',
offset:4
}],
yAxis:
[{
type:'value',
maxInterval:100,
interval:10,
axisLine: {
show: true,
lineStyle: {
type :'value'
}
},
axisTick: {
show: false
},
splitLine:{
show:true,
lineStyle: {
color:'#000000',
width:0.5
}
},
axisLabel: {
formatter: '{value} %'
},
boundaryGap: false
},
{
type:'category',
position:'left',
offset:4
}
],
tooltip:{},
series:
[
{
name: ':2013',
type:'line',
symbolSize: 7,
symbol:'circle',
color:'purple',
//smooth: true,
data:[5,5,80,10,30,30,60,10],
label:{
show:true,
position:'bottom',
textStyle:{
collor:'#000',
fomSize:16
},
//添加单位
formatter:function(params){
return (params.value)+"%"
}
},
}
]//series_end
};//option_end
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>After editing is completed, it needs to be saved as an html file, otherwise it cannot be run.
4. Operation
Note: The html file needs to be in the same directory as the js file, otherwise you need to specify the path when introducing the ECharts file in image code editing.
Open the html file in the browser to view the running results.
If you want to know and learn more graphics configuration items, you can visit Echarts official website
Documentation - Apache ECharts
Finally, if the content is helpful to you, please give it a like! !