This article introduces how to use the ECharts framework to draw graphics (
note: the example in this article uses ECharts 3)
1. Introducing ECharts
The method introduced by ECharts 3 is the same as that of ordinary JavaScript libraries, and only requires a script tag.
<head lang="en">
<meta charset="UTF-8">
<title>firstChart</title>
<!-----引用jquery和echarts---->
<script type="text/javascript" src="JS/jquery-3.1.1.js"></script>
<script src="JS/echarts.main.js"></script>
</head>2. Prepare a DOM container with width and height for ECharts graphics
<body>
<div id="myBarChart" style="width: 600px;height:400px;border: 1px solid"></div>
</body>3. Initialize an echarts instance through the echarts.init method and generate a simple column chart through the setOption method.
The complete code is as follows:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>firstChart</title>
<!-----引用jquery和echarts---->
<script type="text/javascript" src="JS/jquery-3.1.1.js"></script>
<script src="JS/echarts.main.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="myBarChart" style="width: 600px;height:400px;border: 1px solid ;"></div>
<!--绘制图形代码-->
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var barChart = echarts.init(document.getElementById('myBarChart'));
// 指定图表的配置项和数据
var option = {
title: {
text: '各运行部年度总量'
},
tooltip: {},
legend: {
data:['当年值']
},
xAxis: {
data: ["炼油一部","炼油二部","炼油三部","炼油四部","芳烃部","油品储运部","热点部"]
},
yAxis: {},
series: [{
name: '当年值',
type: 'bar',
data: [5, 20, 36, 10, 10, 20, 33]
}]
};
// 使用刚指定的配置项和数据显示图表。
barChart.setOption(option);
</script>
</body>
</html>4. Improve the graphics and configure the line chart and column chart as follows:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>firstChart</title>
<!-----引用jquery和echarts---->
<script type="text/javascript" src="JS/jquery-3.1.1.js"></script>
<script src="JS/echarts.main.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="myBarChart" style="width: 600px;height:400px;border: 1px solid ;"></div>
<!--绘制图形代码-->
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var barChart = echarts.init(document.getElementById('myBarChart'));
/*----------------------------柱形图和折线图---------------------------------*/
var barItemStyle = {
/*设置柱子的样式风格*/
normal: {}, /*默认状态下，使用默认样式*/
emphasis: {
/*鼠标悬停状态下，加深柱子颜色的同时设置一个阴影部分*/
color: '#e34509',
barBorderWidth: 1,
shadowBlur: 20,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0,0,0,0.5)'
}
};
barChart.setOption(option = {
title: {/*title 图形标题*/
text: '柱形图和折线图', /*标题*/
subtext: '数据为虚拟数据', /*副标题*/
x: 'center',
textStyle: {
color: '#000',
fontSize: 24
}
},
tooltip: {}, /*显示鼠标悬停，默认格式*/
legend: {/*legend 图例*/
data: ['当月值', "上年同期", "年度指标"],
x: 'center',
y: 'bottom'
},
xAxis: {/*xAxis X轴*/
data: ["炼油一部", "炼油二部", "炼油三部", "炼油四部", "芳烃部", "油品储运部", "热电部"],
axisTick: {
alignWithLabel: true/*设置坐标轴刻度与标签对齐，默认不设置的状态下是不对齐的*/
},
axisLabel: {
// rotate: 60
textStyle: {
color: '#000'
// fontSize:13
}
}
},
yAxis: {},
series: [/*series 系列信息*/
{
name: '当月值', /*name 需要与图例保持一致*/
type: 'bar', /*type 指明图形类型，bar 柱形图*/
itemStyle: barItemStyle,
data: [32, 43, 54, 65, 54, 56, 32]
},
{
name: '上年同期', /*name 需要与图例保持一致*/
type: 'bar', /*type 指明图形类型，bar 柱形图*/
itemStyle: barItemStyle,
data: [34, 45, 23, 45, 24, 56, 62]
},
{
name: '年度指标',
type: 'line', /*line 折线图*/
itemStyle: {
normal: {
color: '#ffff00'/*默认状态下*/
},
emphasis: {
/*鼠标悬停状态下，加深柱子颜色的同时设置一个阴影部分*/
color: '#f0f033',
barBorderWidth: 1,
shadowBlur: 20,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0,0,0,0.5)'
}
},
data: [30, 28, 20, 30, 29, 27, 19]
}
]
});
</script>
</body>
</html>5. Give graphic design themes
In the download navigation bar of ECharts official website, you can select an existing theme to download, or you can customize a theme.
This example downloads the existing macarons theme. The usage method is as follows:
Final rendering:
