ECharts图的基本使用
2018-09-04 本文已影响0人
Tobea程序猴
一、引入ECharts
方式一：到官网下载 ，如图点击，下载后得到echarts.min.js，然后通过<script>标签引入。
image.png
<header>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</header>
方式二：通过远程地址引用：
<header>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 引入 ECharts 文件 -->
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.common.js"></script>
</header>
二、为echart准备一个大小适宜的Dom
<!-- 为 ECharts 准备一个具备大小（宽高）的Dom -->
<div id="chart" style="width: 55%;height:350px;"></div>
三、先通过echarts.init()方法初始化一个 echarts 实例，再通过 setOption()方法就可以生成一个简单的图表了，而option部分可到官网实例页面在线调试，调试完成再复制过来。另外需要注意让图表自适应浏览器窗口的大小。
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));
// 指定图表的配置项和数据
var option = {
color: ['rgb(139,196,234)', 'rgb(240,217,135)', 'rgb(248,107,79)'],
title: {
text: '数量（次）',
padding: 20,
textStyle: {
fontStyle: 'lighter',
fontSize: 25
}
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['接单', '处理', '完成'],
padding: [25, 60],
icon: 'bar',
left: 'right'
},
toolbox: {
show: true,
feature: {
mark: {show: true},
magicType: {show: true, type: 'line'}
}
},
calculable: true,
xAxis: [
{
type: 'category',
boundaryGap: false,
axisPointer: {
label: {
formatter: function (params) {
return (params.value.replace('.', '月').concat('日'))
}
}
},
data: ["8.16", "8.17", "8.18", "8.19", "8.20", "8.21", "8.22"]
}
],
yAxis: [
{
type: 'value',
axisLabel: {
formatter: '{value}'
}
}
],
series: [
{
symbol: 'circle',
symbolSize: 15, // 折线拐点大小
itemStyle: { // 折线拐点标志的样式
normal: {
borderColor: 'white',
borderWidth: 2,
lineStyle: { // 线条样式
width: 3
}
}
},
name: '接单',
type: 'line',
data: [200,160,210,158,198,188,150]
},
{
symbol: 'circle',
symbolSize: 15, // 折线拐点大小
itemStyle: { // 折线拐点标志的样式
normal: {
borderColor: 'white',
borderWidth: 2,
lineStyle: { // 线条样式
width: 3
}
}
},
name: '处理',
type: 'line',
data: [150,100,167,50,16,158,168]
},
{
symbol: 'circle',
symbolSize: 15, // 折线拐点大小
itemStyle: { // 折线拐点标志的样式
normal: {
borderColor: 'white',
borderWidth: 2,
lineStyle: { // 线条样式
width: 3
}
}
},
name: '完成',
type: 'line',
data: [36,53,48,90,180,250,300]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 图表自适应浏览器窗口大小
window.onresize = function() {
myChart.resize();
}
</script>
最后给出整个HTML供大家参考。
<!DOCTYPE html>
<html>
<header>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 引入 ECharts 文件 -->
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.common.js"></script>
</header>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的Dom -->
<div id="chart" style="width: 55%;height:350px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));
// 指定图表的配置项和数据
var option = {
color: ['rgb(139,196,234)', 'rgb(240,217,135)', 'rgb(248,107,79)'],
title: {
text: '数量（次）',
padding: 20,
textStyle: {
fontStyle: 'lighter',
fontSize: 25
}
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['接单', '处理', '完成'],
padding: [25, 60],
icon: 'bar',
left: 'right'
},
toolbox: {
show: true,
feature: {
mark: {show: true},
magicType: {show: true, type: 'line'}
}
},
calculable: true,
xAxis: [
{
type: 'category',
boundaryGap: false,
axisPointer: {
label: {
formatter: function (params) {
return (params.value.replace('.', '月').concat('日'))
}
}
},
data: ["8.16", "8.17", "8.18", "8.19", "8.20", "8.21", "8.22"]
}
],
yAxis: [
{
type: 'value',
axisLabel: {
formatter: '{value}'
}
}
],
series: [
{
symbol: 'circle',
symbolSize: 15, // 折线拐点大小
itemStyle: { // 折线拐点标志的样式
normal: {
borderColor: 'white',
borderWidth: 2,
lineStyle: { // 线条样式
width: 3
}
}
},
name: '接单',
type: 'line',
data: [200,160,210,158,198,188,150]
},
{
symbol: 'circle',
symbolSize: 15, // 折线拐点大小
itemStyle: { // 折线拐点标志的样式
normal: {
borderColor: 'white',
borderWidth: 2,
lineStyle: { // 线条样式
width: 3
}
}
},
name: '处理',
type: 'line',
data: [150,100,167,50,16,158,168]
},
{
symbol: 'circle',
symbolSize: 15, // 折线拐点大小
itemStyle: { // 折线拐点标志的样式
normal: {
borderColor: 'white',
borderWidth: 2,
lineStyle: { // 线条样式
width: 3
}
}
},
name: '完成',
type: 'line',
data: [36,53,48,90,180,250,300]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 图表自适应浏览器窗口大小
window.onresize = function() {
myChart.resize();
}
</script>
</body>
</html>
效果图如下：
image.png
