echarts入门教程
2019-03-24 本文已影响113人
printf200
一、echarts介绍
ECharts是由百度团队开发的，可高度个性化定制的数据可视化图表库。它的底层依赖轻量级的Canvas类库ZRender，是一个纯JavaScript的图标库，兼容（IE8/9/10/11，Chrome，Firefox，Safari等）主流浏览器，可以运行在PC和移动设备上。
二、完成一个简单图标
废话不多说，一起来完成一个简单的图表，体验一下ECharts的神奇吧！
1.引入ECharts
ECharts3开始不再强制使用AMD的方式按需引入，那么简单粗暴，直接在官网下载所需ECharts文件，像引入普通JavaScript库一样用script标签引入即可。简单吧，看代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts入门</title>
</head>
<body>
<!-- 引入ECharts文件 -->
<script src='echarts.min.js'></script>
</body>
</html>
注：建议把js文件放在body下方
2.准备一个具备宽高的DOM容器
<body>
<!-- 为ECharts准备一个具备大小（宽高）的DOM容器-->
<div id='main' style='width:600px;height:400px;'></div>
</body>
3.初始化一个echarts实例
<body>
<!-- 为ECharts准备一个具备大小（宽高）的DOM容器-->
<div id='main' style='width:600px;height:400px;'></div>
<!--引入echarts.js-->
<script src='./echarts.min.js'></script>
<script>
//基于准备好的DOM，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
</script>
</body>
4.指定图表的配置项和数据
//指定图表的配置项和数据
var option = {
title:{
text:'EChars入门'
},
//提示框组件
tooltip:{
//坐标轴触发，主要用于柱状图，折线图等
trigger:'axis'
},
//图例
legend:{
data:['销量']
},
//横轴
xAxis:{
data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
//纵轴
yAxis:{},
//系列列表。每个系列通过type决定自己的图表类型
series:[{
name:'销量',
//折线图
type:'line',
data:[5, 20, 36, 10, 10, 20]
}]
};
5.显示图标
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
6.完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts入门</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的DOM容器-->
<div id='main' style='width:600px;height:400px;'></div>
<!-- 引入ECharts文件 -->
<script src='./echarts.min.js'></script>
<script>
//基于准备好的DOM，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
//指定图表的配置项和数据
var option = {
title:{
text:'EChars入门'
},
//提示框组件
tooltip:{
//坐标轴触发，主要用于柱状图，折线图等
trigger:'axis'
},
//图例
legend:{
data:['销量']
},
//横轴
xAxis:{
data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
//纵轴
yAxis:{},
//系列列表。每个系列通过type决定自己的图表类型
series:[{
name:'销量',
//折线图
type:'line',
data:[5, 20, 36, 10, 10, 20]
}]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
7.生成图表，如图：
image
就这样，一个漂亮的图表生成了，是不是很简单呢？
饼图例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts入门</title>
<script src='../static/js/echarts.js'></script>
</head>
<body>
<div class="section" id="tags_percent">
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="tags_chart" style="width:100%;height:600px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('tags_chart'));
// 指定图表的配置项和数据
var option = {
title : {
text: '用户动态类型',
subtext: '数据来源: www.jianshu.com',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
clockwise:false,
legend: {
orient: 'vertical',
left: '10%',
data: ['发表评论','喜欢文章','赞赏文章','发表文章','关注用户','关注专题','点赞评论','关注文集']
},
color:['#FF6666','#EFE42A','#64BD3D','#EE9201','#29AAE3',
'#B74AE5','#0AAF9F','#E89589'],
series : [
{
name: '动态类型',
type: 'pie',
radius : '75%',
center: ['50%', '60%'],
data:[{"name": "\u53d1\u8868\u8bc4\u8bba", "value": 6559}, {"name": "\u559c\u6b22\u6587\u7ae0", "value": 1591}, {"name": "\u8d5e\u8d4f\u6587\u7ae0", "value": 468}, {"name": "\u53d1\u8868\u6587\u7ae0", "value": 136}, {"name": "\u5173\u6ce8\u7528\u6237", "value": 1}, {"name": "\u5173\u6ce8\u4e13\u9898", "value": 1}, {"name": "\u70b9\u8d5e\u8bc4\u8bba", "value": 31}, {"name": "\u5173\u6ce8\u6587\u96c6", "value": 11}],
itemStyle: {
emphasis: {
shadowBlur: 100,
shadowOffsetX: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
//*必须，绑定图表自适应功能
window.onresize = function () {
myChart.resize();
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</div>
</body>
</html>
image
折线图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts入门</title>
<script src='../static/js/echarts.js'></script>
</head>
<body>
<div class="section" id="all_month">
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="monthline_chart" style="width:100%;height:600px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart1 = echarts.init(document.getElementById('monthline_chart'));
// 指定图表的配置项和数据
var option = {
// Make gradient line here
visualMap: {
show: false,
type: 'continuous',
seriesIndex: 0,
color:['red','orange','yellow','lightskyblue']
},
title: {
left: 'center',
text: '各个月份的动态次数',
subtext:'数据来源: www.jianshu.com'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
data: ["2016-08", "2016-09", "2016-10", "2016-11", "2016-12", "2017-01", "2017-02", "2017-03", "2017-04", "2017-05", "2017-06", "2017-07", "2017-08", "2017-09", "2017-10", "2017-11", "2017-12", "2018-01", "2018-02", "2018-03", "2018-04", "2018-05", "2018-06", "2018-07", "2018-08"],
name:'月份'
},
yAxis: {
splitLine: {show: false},
name:'动态次数'
},
grid: {
bottom: '6%',
top: '10%'
},
series: {
type: 'line',
showSymbol: false,
data: [9, 77, 273, 523, 509, 678, 1008, 974, 308, 316, 605, 273, 356, 210, 354, 300, 192, 243, 192, 390, 219, 282, 226, 210, 72],
markPoint : {
data : [
{type : 'max',
name: '最大值'
}
]
},
markLine: {
data: [
{type: 'average', name: '平均值',
label: {
normal: {
position: 'end',
formatter: '月平均值:{c}'
}
}},
{type: 'max', name: '最大值',
label: {
normal: {
position: 'end',
formatter: '最大值'
}
}}
]
}
}
};
//*必须，绑定图表自适应功能
window.onresize = function () {
myChart1.resize();
};
// 使用刚指定的配置项和数据显示图表。
myChart1.setOption(option);
</script>
</div>
</body>
</html>
image
波浪图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts入门</title>
<script src='../static/js/echarts.js'></script>
</head>
<body>
<div class="section" id="all_day">
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="dayline_chart" style="width:100%;height:600px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart2 = echarts.init(document.getElementById('dayline_chart'));
// 指定图表的配置项和数据
var option = {
// Make gradient line here
visualMap: {
show: false,
type: 'continuous',
seriesIndex: 0,
color:['red','orange','yellow','lightskyblue']
},
title: {
left: 'center',
text: '每天的动态次数(页内滚动鼠标或拖动下方进度条，可缩放数据)',
subtext:'数据来源: www.jianshu.com'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
data: ["2016-08-25", "2016-08-30", "2016-08-31", "2016-09-01", "2016-09-02", "2016-09-03", "2016-09-04", "2016-09-05", "2016-09-06", "2016-09-07", "2016-09-08", "2016-09-09", "2016-09-10", "2016-09-11", "2016-09-12", "2016-09-13", "2016-09-15", "2016-09-16", "2016-09-22", "2016-09-23", "2016-09-26", "2016-09-27", "2016-09-28", "2016-09-29", "2016-09-30", "2016-10-01", "2016-10-02", "2016-10-03", "2016-10-04", "2016-10-05", "2016-10-06", "2016-10-07", "2016-10-08", "2016-10-09", "2016-10-10", "2016-10-11", "2016-10-12", "2016-10-13", "2016-10-14", "2016-10-15", "2016-10-16", "2016-10-17", "2016-10-18", "2016-10-19", "2016-10-20", "2016-10-21", "2016-10-22", "2016-10-25", "2016-10-26", "2016-10-27", "2016-10-28", "2016-10-29", "2016-10-30", "2016-10-31", "2016-11-01", "2016-11-02", "2016-11-03", "2016-11-04", "2016-11-05", "2016-11-06", "2016-11-07", "2016-11-08", "2016-11-09", "2016-11-10", "2016-11-11", "2016-11-13", "2016-11-14", "2016-11-15", "2016-11-16", "2016-11-17", "2016-11-18", "2016-11-19", "2016-11-20", "2016-11-21", "2016-11-22", "2016-11-23", "2016-11-24", "2016-11-25", "2016-11-26", "2016-11-27", "2016-11-28", "2016-11-29", "2016-11-30", "2016-12-01", "2016-12-02", "2016-12-03", "2016-12-04", "2016-12-05", "2016-12-06", "2016-12-07", "2016-12-08", "2016-12-09", "2016-12-10", "2016-12-11", "2016-12-12", "2016-12-13", "2016-12-14", "2016-12-15", "2016-12-16", "2016-12-17", "2016-12-18", "2016-12-19", "2016-12-20", "2016-12-21", "2016-12-22", "2016-12-23", "2016-12-24", "2016-12-25", "2016-12-26", "2016-12-27", "2016-12-28", "2016-12-29", "2016-12-30", "2016-12-31", "2017-01-01", "2017-01-02", "2017-01-03", "2017-01-04", "2017-01-05", "2017-01-06", "2017-01-07", "2017-01-08", "2017-01-09", "2017-01-10", "2017-01-11", "2017-01-12", "2017-01-13", "2017-01-14", "2017-01-15", "2017-01-16", "2017-01-17", "2017-01-18", "2017-01-19", "2017-01-20", "2017-01-21", "2017-01-22", "2017-01-23", "2017-01-24", "2017-01-25", "2017-01-26", "2017-01-27", "2017-01-28", "2017-01-29", "2017-01-30", "2017-01-31", "2017-02-01", "2017-02-02", "2017-02-03", "2017-02-04", "2017-02-05", "2017-02-06", "2017-02-07", "2017-02-08", "2017-02-09", "2017-02-10", "2017-02-11", "2017-02-12", "2017-02-13", "2017-02-14", "2017-02-15", "2017-02-16", "2017-02-17", "2017-02-18", "2017-02-19", "2017-02-20", "2017-02-21", "2017-02-22", "2017-02-23", "2017-02-24", "2017-02-25", "2017-02-26", "2017-02-27", "2017-02-28", "2017-03-01", "2017-03-02", "2017-03-03", "2017-03-04", "2017-03-05", "2017-03-06", "2017-03-07", "2017-03-08", "2017-03-09", "2017-03-10", "2017-03-11", "2017-03-12", "2017-03-13", "2017-03-14", "2017-03-15", "2017-03-16", "2017-03-17", "2017-03-18", "2017-03-19", "2017-03-20", "2017-03-21", "2017-03-22", "2017-03-23", "2017-03-24", "2017-03-25", "2017-03-26", "2017-03-27", "2017-03-28", "2017-03-29", "2017-03-30", "2017-03-31", "2017-04-01", "2017-04-02", "2017-04-03", "2017-04-04", "2017-04-05", "2017-04-06", "2017-04-07", "2017-04-08", "2017-04-09", "2017-04-10", "2017-04-11", "2017-04-12", "2017-04-13", "2017-04-14", "2017-04-15", "2017-04-16", "2017-04-17", "2017-04-18", "2017-04-19", "2017-04-20", "2017-04-21", "2017-04-22", "2017-04-23", "2017-04-24", "2017-04-25", "2017-04-26", "2017-04-27", "2017-04-28", "2017-04-29", "2017-04-30", "2017-05-01", "2017-05-02", "2017-05-03", "2017-05-04", "2017-05-05", "2017-05-06", "2017-05-07", "2017-05-08", "2017-05-09", "2017-05-10", "2017-05-12", "2017-05-13", "2017-05-14", "2017-05-15", "2017-05-16", "2017-05-17", "2017-05-18", "2017-05-19", "2017-05-20", "2017-05-21", "2017-05-22", "2017-05-23", "2017-05-24", "2017-05-25", "2017-05-26", "2017-05-27", "2017-05-28", "2017-05-29", "2017-05-30", "2017-05-31", "2017-06-01", "2017-06-02", "2017-06-03", "2017-06-04", "2017-06-05", "2017-06-06", "2017-06-07", "2017-06-08", "2017-06-09", "2017-06-10", "2017-06-11", "2017-06-12", "2017-06-13", "2017-06-14", "2017-06-15", "2017-06-16", "2017-06-17", "2017-06-18", "2017-06-19", "2017-06-20", "2017-06-21", "2017-06-22", "2017-06-23", "2017-06-24", "2017-06-25", "2017-06-26", "2017-06-27", "2017-06-28", "2017-06-29", "2017-06-30", "2017-07-01", "2017-07-02", "2017-07-03", "2017-07-04", "2017-07-05", "2017-07-06", "2017-07-07", "2017-07-08", "2017-07-09", "2017-07-10", "2017-07-11", "2017-07-12", "2017-07-13", "2017-07-14", "2017-07-15", "2017-07-16", "2017-07-17", "2017-07-18", "2017-07-19", "2017-07-20", "2017-07-21", "2017-07-22", "2017-07-23", "2017-07-24", "2017-07-25", "2017-07-27", "2017-07-28", "2017-07-31", "2017-08-01", "2017-08-02", "2017-08-03", "2017-08-04", "2017-08-05", "2017-08-06", "2017-08-07", "2017-08-08", "2017-08-12", "2017-08-13", "2017-08-14", "2017-08-15", "2017-08-16", "2017-08-17", "2017-08-18", "2017-08-19", "2017-08-20", "2017-08-21", "2017-08-22", "2017-08-23", "2017-08-24", "2017-08-25", "2017-08-26", "2017-08-27", "2017-08-28", "2017-08-30", "2017-08-31", "2017-09-01", "2017-09-03", "2017-09-04", "2017-09-05", "2017-09-06", "2017-09-07", "2017-09-08", "2017-09-09", "2017-09-11", "2017-09-13", "2017-09-14", "2017-09-15", "2017-09-16", "2017-09-17", "2017-09-18", "2017-09-19", "2017-09-20", "2017-09-21", "2017-09-22", "2017-09-23", "2017-09-24", "2017-09-25", "2017-09-27", "2017-09-28", "2017-09-29", "2017-09-30", "2017-10-03", "2017-10-04", "2017-10-05", "2017-10-06", "2017-10-07", "2017-10-08", "2017-10-09", "2017-10-10", "2017-10-11", "2017-10-12", "2017-10-13", "2017-10-14", "2017-10-16", "2017-10-17", "2017-10-18", "2017-10-19", "2017-10-20", "2017-10-21", "2017-10-22", "2017-10-23", "2017-10-24", "2017-10-25", "2017-10-26", "2017-10-27", "2017-10-28", "2017-10-29", "2017-10-30", "2017-10-31", "2017-11-01", "2017-11-02", "2017-11-03", "2017-11-04", "2017-11-05", "2017-11-06", "2017-11-07", "2017-11-08", "2017-11-09", "2017-11-10", "2017-11-11", "2017-11-12", "2017-11-13", "2017-11-14", "2017-11-15", "2017-11-16", "2017-11-17", "2017-11-18", "2017-11-19", "2017-11-20", "2017-11-21", "2017-11-22", "2017-11-23", "2017-11-24", "2017-11-25", "2017-11-26", "2017-11-27", "2017-11-28", "2017-11-29", "2017-11-30", "2017-12-01", "2017-12-02", "2017-12-03", "2017-12-04", "2017-12-06", "2017-12-07", "2017-12-08", "2017-12-09", "2017-12-10", "2017-12-11", "2017-12-12", "2017-12-13", "2017-12-14", "2017-12-15", "2017-12-16", "2017-12-17", "2017-12-18", "2017-12-19", "2017-12-20", "2017-12-21", "2017-12-22", "2017-12-23", "2017-12-24", "2017-12-25", "2017-12-26", "2017-12-27", "2017-12-28", "2017-12-30", "2017-12-31", "2018-01-02", "2018-01-03", "2018-01-04", "2018-01-05", "2018-01-06", "2018-01-07", "2018-01-08", "2018-01-09", "2018-01-10", "2018-01-11", "2018-01-12", "2018-01-13", "2018-01-14", "2018-01-15", "2018-01-16", "2018-01-17", "2018-01-18", "2018-01-19", "2018-01-20", "2018-01-21", "2018-01-22", "2018-01-23", "2018-01-24", "2018-01-25", "2018-01-26", "2018-01-27", "2018-01-29", "2018-01-31", "2018-02-01", "2018-02-02", "2018-02-04", "2018-02-05", "2018-02-06", "2018-02-07", "2018-02-08", "2018-02-10", "2018-02-11", "2018-02-13", "2018-02-14", "2018-02-16", "2018-02-17", "2018-02-18", "2018-02-19", "2018-02-20", "2018-02-21", "2018-02-22", "2018-02-23", "2018-02-24", "2018-02-25", "2018-02-26", "2018-02-27", "2018-03-01", "2018-03-03", "2018-03-05", "2018-03-06", "2018-03-07", "2018-03-08", "2018-03-09", "2018-03-10", "2018-03-11", "2018-03-12", "2018-03-13", "2018-03-14", "2018-03-15", "2018-03-16", "2018-03-17", "2018-03-18", "2018-03-19", "2018-03-20", "2018-03-21", "2018-03-22", "2018-03-23", "2018-03-24", "2018-03-25", "2018-03-26", "2018-03-27", "2018-03-29", "2018-03-30", "2018-04-02", "2018-04-04", "2018-04-05", "2018-04-06", "2018-04-07", "2018-04-08", "2018-04-09", "2018-04-10", "2018-04-11", "2018-04-12", "2018-04-13", "2018-04-14", "2018-04-15", "2018-04-16", "2018-04-17", "2018-04-18", "2018-04-19", "2018-04-20", "2018-04-21", "2018-04-22", "2018-04-23", "2018-04-24", "2018-04-25", "2018-04-26", "2018-04-27", "2018-04-28", "2018-04-29", "2018-04-30", "2018-05-01", "2018-05-02", "2018-05-03", "2018-05-04", "2018-05-05", "2018-05-06", "2018-05-07", "2018-05-08", "2018-05-09", "2018-05-10", "2018-05-12", "2018-05-13", "2018-05-14", "2018-05-15", "2018-05-16", "2018-05-17", "2018-05-18", "2018-05-19", "2018-05-20", "2018-05-21", "2018-05-22", "2018-05-23", "2018-05-24", "2018-05-25", "2018-05-26", "2018-05-27", "2018-05-28", "2018-05-29", "2018-05-30", "2018-05-31", "2018-06-01", "2018-06-02", "2018-06-03", "2018-06-04", "2018-06-05", "2018-06-06", "2018-06-07", "2018-06-08", "2018-06-09", "2018-06-10", "2018-06-11", "2018-06-12", "2018-06-13", "2018-06-14", "2018-06-15", "2018-06-16", "2018-06-17", "2018-06-18", "2018-06-19", "2018-06-20", "2018-06-21", "2018-06-22", "2018-06-24", "2018-06-25", "2018-06-26", "2018-06-27", "2018-06-28", "2018-06-29", "2018-06-30", "2018-07-01", "2018-07-02", "2018-07-03", "2018-07-04", "2018-07-05", "2018-07-06", "2018-07-07", "2018-07-08", "2018-07-09", "2018-07-10", "2018-07-11", "2018-07-12", "2018-07-13", "2018-07-14", "2018-07-15", "2018-07-16", "2018-07-17", "2018-07-18", "2018-07-19", "2018-07-20", "2018-07-21", "2018-07-22", "2018-07-23", "2018-07-24", "2018-07-25", "2018-07-26", "2018-07-27", "2018-07-28", "2018-07-30", "2018-07-31", "2018-08-01", "2018-08-02", "2018-08-03", "2018-08-05", "2018-08-07", "2018-08-08", "2018-08-09", "2018-08-10", "2018-08-11", "2018-08-12", "2018-08-13", "2018-08-15", "2018-08-16", "2018-08-17", "2018-08-18", "2018-08-19", "2018-08-20"],
name:'日期'
},
yAxis: {
splitLine: {show: false},
name:'动态次数'
},
grid: {
bottom: '10%',
top: '12%'
},
series: {
type: 'line',
showSymbol: false,
data: [1, 2, 6, 2, 5, 7, 1, 2, 4, 3, 5, 6, 2, 1, 5, 7, 1, 4, 1, 1, 1, 9, 1, 5, 4, 10, 5, 1, 8, 4, 16, 6, 2, 3, 12, 11, 8, 16, 24, 5, 9, 11, 5, 9, 11, 24, 10, 5, 3, 14, 11, 14, 10, 6, 6, 9, 4, 23, 39, 17, 3, 6, 29, 23, 9, 24, 3, 16, 9, 11, 9, 26, 25, 28, 14, 21, 23, 26, 18, 27, 11, 28, 36, 14, 10, 13, 2, 30, 12, 21, 37, 18, 28, 22, 12, 11, 6, 33, 5, 8, 6, 18, 23, 4, 15, 10, 19, 13, 13, 4, 3, 44, 16, 39, 41, 2, 6, 16, 23, 14, 8, 20, 34, 37, 19, 34, 8, 29, 28, 20, 51, 8, 35, 4, 61, 38, 16, 8, 31, 13, 5, 13, 19, 13, 24, 9, 82, 19, 63, 11, 6, 15, 23, 23, 2, 73, 37, 20, 27, 48, 39, 23, 9, 8, 19, 44, 17, 164, 45, 50, 44, 38, 50, 76, 76, 31, 20, 53, 59, 21, 62, 37, 41, 26, 12, 29, 27, 32, 44, 35, 4, 26, 28, 31, 28, 13, 21, 5, 20, 37, 28, 27, 20, 5, 14, 7, 4, 5, 10, 14, 10, 2, 7, 7, 6, 7, 39, 7, 3, 4, 16, 16, 15, 7, 17, 2, 6, 10, 8, 7, 33, 17, 2, 6, 10, 8, 20, 15, 14, 7, 4, 9, 15, 8, 4, 2, 4, 18, 5, 9, 18, 7, 32, 10, 9, 7, 12, 1, 4, 12, 10, 17, 14, 11, 12, 16, 23, 11, 21, 26, 13, 28, 6, 1, 13, 68, 49, 20, 12, 17, 9, 31, 6, 14, 9, 19, 46, 8, 17, 23, 46, 13, 11, 17, 1, 7, 30, 2, 7, 20, 37, 12, 7, 22, 9, 3, 6, 8, 1, 10, 13, 14, 3, 3, 4, 2, 5, 8, 3, 8, 11, 17, 6, 2, 6, 16, 7, 9, 1, 5, 3, 34, 2, 6, 13, 7, 1, 6, 42, 41, 1, 1, 9, 24, 4, 28, 60, 13, 9, 7, 2, 16, 3, 4, 14, 1, 2, 1, 11, 9, 23, 18, 4, 3, 13, 13, 4, 15, 13, 3, 2, 19, 6, 2, 2, 9, 8, 19, 8, 3, 10, 16, 3, 6, 10, 1, 1, 5, 31, 2, 16, 31, 8, 9, 19, 4, 37, 16, 21, 11, 26, 10, 14, 1, 3, 8, 3, 3, 4, 9, 34, 31, 8, 16, 22, 12, 23, 9, 3, 1, 4, 8, 15, 21, 12, 5, 8, 1, 22, 5, 2, 2, 5, 1, 3, 17, 4, 8, 4, 2, 3, 17, 15, 5, 1, 7, 3, 10, 2, 2, 4, 1, 6, 5, 12, 19, 8, 17, 8, 1, 1, 6, 17, 15, 5, 18, 5, 5, 9, 4, 3, 1, 5, 27, 3, 4, 1, 6, 6, 5, 5, 6, 6, 6, 4, 3, 4, 9, 14, 47, 4, 6, 1, 5, 3, 9, 3, 1, 23, 4, 12, 4, 3, 8, 7, 8, 9, 27, 11, 15, 19, 7, 3, 2, 1, 14, 10, 5, 11, 10, 18, 9, 21, 36, 11, 18, 6, 42, 17, 38, 10, 3, 28, 7, 11, 22, 14, 24, 1, 1, 4, 12, 20, 1, 2, 1, 13, 4, 5, 3, 7, 20, 7, 6, 9, 33, 5, 4, 21, 7, 3, 2, 2, 1, 1, 4, 2, 20, 17, 6, 1, 1, 2, 3, 13, 8, 15, 1, 1, 1, 1, 7, 7, 9, 27, 16, 8, 8, 2, 16, 24, 12, 20, 14, 12, 10, 16, 4, 14, 3, 14, 6, 5, 1, 14, 10, 6, 4, 10, 3, 20, 27, 1, 3, 1, 3, 6, 11, 3, 11, 6, 2, 6, 14, 10, 8, 4, 10, 10, 7, 31, 12, 5, 3, 3, 6, 12, 5, 8, 3, 3, 2, 3, 1, 8, 2, 3, 3, 4, 5, 4, 12, 15, 10, 3, 9, 8, 8, 1, 4, 12, 1, 7, 7, 2, 4, 3, 1, 3, 3, 4, 2, 7, 3]
},
dataZoom: [{
type: 'slider',
show:true,
start: 0,
end:100
},
{
type:'inside',
start: 0,
end:100
}]
};
//*必须，绑定图表自适应功能
window.onresize = function () {
myChart2.resize();
};
// 使用刚指定的配置项和数据显示图表。
myChart2.setOption(option);
</script>
</div>
</body>
</html>
image
柱状图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts入门</title>
<script src='../static/js/echarts.js'></script>
</head>
<body>
<div class="section" id="all_week">
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="weekline_chart" style="width:100%;height:600px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart4 = echarts.init(document.getElementById('weekline_chart'));
// 指定图表的配置项和数据
var option = {
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
title: {
left: 'center',
text: '一周中的动态情况',
subtext:'数据来源: www.jianshu.com'
},
grid: {
left: '7%',
right: '8%',
bottom: '8%'
},
xAxis : [
{
type : 'category',
data : ["\u5468\u4e00", "\u5468\u4e8c", "\u5468\u4e09", "\u5468\u56db", "\u5468\u4e94", "\u5468\u516d", "\u5468\u65e5"],
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value',
name:'动态次数'
}
],
series : [
{
name:'动态次数',
type:'bar',
barWidth: '50%',
data:[1303, 1201, 1296, 1594, 1097, 1122, 1186],
itemStyle: {
normal: {
color: function(params) {
//首先定义一个数组
var colorList = [
'#C33531','#EFE42A','#64BD3D','#EE9201','#29AAE3',
'#B74AE5','#0AAF9F','#E89589'
];
return colorList[params.dataIndex]
}
}
}
}
]
};
//*必须，绑定图表自适应功能
window.onresize = function () {
myChart4.resize();
};
// 使用刚指定的配置项和数据显示图表。
myChart4.setOption(option);
</script>
</div>
</body>
</html>
image
气泡图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts入门</title>
<script src='../static/js/echarts.js'></script>
</head>
<body>
<div class="section" id="share_note_week_hour">
<div align="center">
<h4>一周中发表文章时间频率分布</h4>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="share_note_week_hour_chart" style="width:100%;height:580px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('share_note_week_hour_chart'));
// 指定图表的配置项和数据
var hours = ['12am', '1am', '2am', '3am', '4am', '5am', '6am',
'7am', '8am', '9am','10am','11am',
'12pm', '1pm', '2pm', '3pm', '4pm', '5pm',
'6pm', '7pm', '8pm', '9pm', '10pm', '11pm'];
var days = ['周一', '周二',
'周三', '周四', '周五', '周六','周日'];
var data = [[4, 13, 2], [3, 13, 2], [2, 19, 1], [0, 13, 1], [3, 23, 3], [2, 21, 1], [1, 21, 2], [0, 7, 3], [2, 23, 1], [4, 20, 2], [2, 13, 5], [0, 18, 3], [3, 22, 3], [1, 23, 2], [0, 22, 3], [6, 23, 3], [0, 23, 6], [6, 21, 1], [2, 18, 2], [6, 22, 5], [3, 20, 2], [1, 22, 2], [3, 8, 2], [3, 21, 1], [2, 20, 2], [0, 19, 2], [6, 16, 2], [4, 18, 1], [5, 16, 1], [1, 8, 3], [0, 8, 5], [4, 8, 2], [3, 6, 1], [5, 20, 2], [4, 22, 2], [2, 22, 3], [5, 10, 1], [3, 9, 3], [2, 16, 2], [5, 17, 1], [1, 19, 1], [6, 20, 1], [2, 7, 1], [1, 20, 2], [2, 15, 1], [5, 23, 1], [4, 6, 1], [6, 14, 2], [5, 13, 1], [6, 15, 1], [2, 14, 2], [1, 16, 1], [4, 16, 1], [1, 14, 3], [6, 12, 1], [4, 12, 1], [2, 17, 1], [1, 17, 1], [1, 10, 1], [6, 13, 2], [6, 1, 1], [4, 14, 1], [0, 21, 1], [4, 17, 1], [0, 9, 2], [3, 7, 1], [6, 11, 1], [0, 17, 1], [2, 0, 1], [3, 0, 1], [6, 18, 1], [4, 23, 1], [5, 21, 1], [4, 15, 1], [2, 8, 1], [6, 0, 1], [1, 1, 1], [5, 22, 1]];
var option = {
tooltip: {
position: 'left'
},
title: [],
color:['#FF6666','#EFE42A','#64BD3D','#EE9201','#29AAE3',
'#B74AE5','#0AAF9F','#E89589'],
singleAxis: [],
series: []
};
echarts.util.each(days, function (day, idx) {
option.title.push({
textBaseline: 'middle',
top: (idx + 0.5) * 100 / 7 + '%',
text: day
});
option.singleAxis.push({
left: 120,
type: 'category',
boundaryGap: false,
data: hours,
top: (idx * 100 / 7 + 5) + '%',
height: (100 / 7 - 10) + '%',
axisLabel: {
interval: 2
}
});
option.series.push({
singleAxisIndex: idx,
coordinateSystem: 'singleAxis',
type: 'scatter',
data: [],
symbolSize: function (dataItem) {
return dataItem[1]/6 * 100;
}
});
});
echarts.util.each(data, function (dataItem) {
option.series[dataItem[0]].data.push([dataItem[1], dataItem[2]]);
});
//*必须，绑定图表自适应功能
window.onresize = function () {
myChart.resize();
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</div>
</div>
</body>
</html>
image
词云
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts入门</title>
<script src='../static/js/echarts.js'></script>
<script src='../static/js/echarts-wordcloud.min.js'></script>
</head>
<body>
<div class="section" id="comment_cloud">
<div align="center">
<h3>共写下评论 6559 条，以下词语出现频率较高</h3>
<div id="11eb85c7b04b42a1ab8f1883a090eb59" style="width:100%;height:600px;"></div>
<script type="text/javascript">
var myChart_11eb85c7b04b42a1ab8f1883a090eb59 = echarts.init(document.getElementById('11eb85c7b04b42a1ab8f1883a090eb59'), 'light', {renderer: 'canvas'});
var option_11eb85c7b04b42a1ab8f1883a090eb59 = {
"title": [
{
"left": "auto",
"top": "auto",
"textStyle": {
"fontSize": 18
},
"subtextStyle": {
"fontSize": 12
}
}
],
"toolbox": {
"show": true,
"orient": "vertical",
"left": "95%",
"top": "center",
"feature": {
"saveAsImage": {
"show": true,
"title": "\u4e0b\u8f7d\u56fe\u7247"
},
"restore": {
"show": true
},
"dataView": {
"show": true
}
}
},
"series_id": 7907133,
"tooltip": {
"trigger": "item",
"triggerOn": "mousemove|click",
"axisPointer": {
"type": "line"
},
"textStyle": {
"fontSize": 14
},
"backgroundColor": "rgba(50,50,50,0.7)",
"borderColor": "#333",
"borderWidth": 0
},
"series": [
{
"type": "wordCloud",
"shape": "diamond",
"rotationRange": [
0,
0
],
"rotationStep": 45,
"girdSize": 20,
"sizeRange": [
15,
120
],
"data": [
{
"name": "\u81ea\u5df1",
"value": 453,
"textStyle": {
"normal": {
"color": "rgb(89,84,114)"
}
}
},
{
"name": "\u53ef\u4ee5",
"value": 404,
"textStyle": {
"normal": {
"color": "rgb(112,20,77)"
}
}
},
{
"name": "\u77e5\u9053",
"value": 322,
"textStyle": {
"normal": {
"color": "rgb(36,100,80)"
}
}
},
{
"name": "\u6587\u7ae0",
"value": 318,
"textStyle": {
"normal": {
"color": "rgb(131,90,7)"
}
}
},
{
"name": "\u4e0d\u662f",
"value": 282,
"textStyle": {
"normal": {
"color": "rgb(136,7,65)"
}
}
},
{
"name": "\u5c31\u662f",
"value": 246,
"textStyle": {
"normal": {
"color": "rgb(115,135,115)"
}
}
},
{
"name": "\u53ef\u80fd",
"value": 191,
"textStyle": {
"normal": {
"color": "rgb(30,21,126)"
}
}
},
{
"name": "\u4e0d\u77e5",
"value": 177,
"textStyle": {
"normal": {
"color": "rgb(109,135,125)"
}
}
},
{
"name": "\u751f\u6d3b",
"value": 173,
"textStyle": {
"normal": {
"color": "rgb(137,143,23)"
}
}
},
{
"name": "\u771f\u7684",
"value": 170,
"textStyle": {
"normal": {
"color": "rgb(121,158,12)"
}
}
},
{
"name": "\u5f88\u591a",
"value": 166,
"textStyle": {
"normal": {
"color": "rgb(5,25,78)"
}
}
},
{
"name": "\u4e8b\u60c5",
"value": 155,
"textStyle": {
"normal": {
"color": "rgb(141,103,120)"
}
}
},
{
"name": "\u597d\u50cf",
"value": 154,
"textStyle": {
"normal": {
"color": "rgb(13,72,149)"
}
}
},
{
"name": "\u5b69\u5b50",
"value": 150,
"textStyle": {
"normal": {
"color": "rgb(73,35,117)"
}
}
},
{
"name": "\u52a0\u6cb9",
"value": 150,
"textStyle": {
"normal": {
"color": "rgb(70,144,105)"
}
}
},
{
"name": "\u770b\u5230",
"value": 141,
"textStyle": {
"normal": {
"color": "rgb(71,135,3)"
}
}
},
{
"name": "\u4e00\u8d77",
"value": 141,
"textStyle": {
"normal": {
"color": "rgb(60,21,152)"
}
}
},
{
"name": "\u5e0c\u671b",
"value": 139,
"textStyle": {
"normal": {
"color": "rgb(3,66,97)"
}
}
},
{
"name": "\u6545\u4e8b",
"value": 136,
"textStyle": {
"normal": {
"color": "rgb(155,66,130)"
}
}
},
{
"name": "\u5982\u679c",
"value": 135,
"textStyle": {
"normal": {
"color": "rgb(4,70,45)"
}
}
},
{
"name": "\u6240\u4ee5",
"value": 128,
"textStyle": {
"normal": {
"color": "rgb(73,100,134)"
}
}
},
{
"name": "\u4eca\u5929",
"value": 126,
"textStyle": {
"normal": {
"color": "rgb(86,119,29)"
}
}
},
{
"name": "\u53ea\u662f",
"value": 121,
"textStyle": {
"normal": {
"color": "rgb(18,33,113)"
}
}
}
]
}
],
"legend": [
{
"data": [],
"selectedMode": "multiple",
"show": true,
"left": "center",
"top": "top",
"orient": "horizontal",
"textStyle": {
"fontSize": 12
}
}
],
"color": [
"#c23531",
"#2f4554",
"#61a0a8",
"#d48265",
"#749f83",
"#ca8622",
"#bda29a",
"#6e7074",
"#546570",
"#c4ccd3",
"#f05b72",
"#ef5b9c",
"#f47920",
"#905a3d",
"#fab27b",
"#2a5caa",
"#444693",
"#726930",
"#b2d235",
"#6d8346",
"#ac6767",
"#1d953f",
"#6950a1",
"#918597",
"#f6f5ec"
]
};
myChart_11eb85c7b04b42a1ab8f1883a090eb59.setOption(option_11eb85c7b04b42a1ab8f1883a090eb59);
</script>
</div>
</div>
</body>
</html>
image
