07-3 echarts的使用.md
2019-02-15 本文已影响0人
时修七年
ECharts，是百度开源的可视化库，它使用 JavaScript和canvas 实现，具有简单易用的特点。
echarts的使用分为5步
//1.引入echarts
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.js"></script>
// 2.echarts需要一个承载点，因此我们需要设置一个容器
<div id="echarts"></div>
// 3.定义配置项
let option = {}
// 4.初始化echarts
let Chart = echarts.init(document.getElementById("#echarts"))
// 5.设置option
Chart.setOption(option)
echart.png
柱状图及常用配置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.js"></script>
</head>
<body>
<div id="echarts" style="width: 850px;height: 600px;margin: 30px auto; padding: 40px;>
</div>
<script type="text/javascript">
let option = {
// 设置标题
title: {
text: "北京市人口分布图",//主标题
subtext: "2019年度",//副标题
textStyle: {
color: "#00cc66"
},
subtextStyle: {
color: "#9ea7b4"
}
},
// 设置图例
legend: {
data: ['男','女','平均年龄'],
orient: 'vertical',
top: "middle",
right: "right"
},
// 鼠标hover到柱子上展示数值
tooltip: {},
// x轴设置
xAxis: [
{
type: "category",
data: ['一月份','二月份','三月份','四月份',"五月份"],
}
],
// y轴设置
yAxis: [
{
type: "value",
name: '人口'
},
],
// series与图列相对应
series: [
{
name: '男',
type: 'bar',
// 配置柱状图颜色
itemStyle: {
color: "#ff9900",
},
barWidth: "20%",
data: [786,23,816,945,1002],
// 条形图上是否显示值
label: {
normal: {
show: true,
position: 'top'
}
},
},
{
name: '女',
type: 'bar',
barWidth: "20%",
barGap: "50%",//不同条目之间的距离,比如该图的男女,用在最后一个
// barCategoryGap: 20,//不同类别之间的距离，与barWidth只能存在一个，用在最后一个
data: [1000,40,906,1034,1302],
label: {
normal: {
show: true,
position: 'top' // inside,top
}
},
},
],
// 效果等同ps参考线
// axisPointer: {
// show: true
// }
}
let Echart = echarts.init(document.getElementById("echarts"))
Echart.setOption(option)
</script>
</body>
</html>
在一个图表中同时使用多种
在legend的data中，增加图例说明,在y轴新建标尺，同时在series 中增加配置项
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.js"></script>
</head>
<body>
<div id="echarts" style="width: 850px;height: 600px;margin: 30px auto; padding: 40px;border: 1px solid red">
</div>
<script type="text/javascript">
let option = {
// 设置标题
title: {
text: "北京市人口分布图",//主标题
subtext: "2019年度",//副标题
textStyle: {
color: "#00cc66"
},
subtextStyle: {
color: "#9ea7b4"
}
},
// 设置图例
legend: {
data: ['男','女','平均年龄'],
orient: 'vertical',
top: "middle",
right: "right"
},
// 鼠标hover到柱子上展示数值
tooltip: {},
// x轴设置
xAxis: [
{
type: "category",
data: ['一月份','二月份','三月份','四月份',"五月份"],
}
],
// y轴设置
yAxis: [
{
type: "value",
name: '人口'
},
{
type: 'value',
name: '年龄',
axisLabel: {
formatter: '{value} 岁'
},
}
],
// series与图列相对应
series: [
{
name: '男',
type: 'bar',
// 配置柱状图颜色
itemStyle: {
color: "#ff9900",
},
barWidth: "20%",
data: [786,23,816,945,1002],
// 条形图上是否显示值
label: {
normal: {
show: true,
position: 'top'
}
},
},
{
name: '女',
type: 'bar',
barWidth: "20%",
barGap: "50%",//不同条目之间的距离,比如该图的男女,用在最后一个
// barCategoryGap: 20,//不同类别之间的距离，与barWidth只能存在一个，用在最后一个
data: [1000,40,906,1034,1302],
label: {
normal: {
show: true,
position: 'top' // inside,top
}
},
},
// 折线图
{
name: '平均年龄',
type: 'line',
yAxisIndex: 1,
smooth: true,
data: [
{name: '女',value:33},
{name: '女',value: 28},
{name: '女',value: 36},
{name: '女',value: 34},
{name: '女',value: 32}
]
},
{
name: '平均年龄',
type: 'line',
yAxisIndex: 1,
smooth: true,
itemStyle: {
color: "#ff9900",
},
data: [
{name: '男',value:33},
{name: '男',value: 23},
{name: '男',value: 26},
{name: '男',value: 35},
{name: '男',value: 42}
]
}
],
// 效果等同ps参考线
// axisPointer: {
// show: true
// }
}
let Echart = echarts.init(document.getElementById("echarts"))
Echart.setOption(option)
</script>
</body>
</html>
code.png
