简书 echarts mysql_echarts入门教程
一、echarts介绍
ECharts是由百度团队开发的，可高度个性化定制的数据可视化图表库。它的底层依赖轻量级的Canvas类库ZRender，是一个纯JavaScript的图标库，兼容(IE8/9/10/11，Chrome，Firefox，Safari等)主流浏览器，可以运行在PC和移动设备上。
二、完成一个简单图标
废话不多说，一起来完成一个简单的图表，体验一下ECharts的神奇吧！
1.引入ECharts
ECharts3开始不再强制使用AMD的方式按需引入，那么简单粗暴，直接在官网下载所需ECharts文件，像引入普通JavaScript库一样用script标签引入即可。简单吧，看代码：
ECharts入门
注：建议把js文件放在body下方
2.准备一个具备宽高的DOM容器
3.初始化一个echarts实例
//基于准备好的DOM，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
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.完整代码
ECharts入门
//基于准备好的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);
7.生成图表，如图：
image
就这样，一个漂亮的图表生成了，是不是很简单呢？
饼图例子
ECharts入门
// 基于准备好的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}
{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);
image
折线图
ECharts入门
// 基于准备好的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);
image
波浪图
ECharts入门
// 基于准备好的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);
image
柱状图
ECharts入门
// 基于准备好的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);
image
气泡图
ECharts入门
一周中发表文章时间频率分布
// 基于准备好的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);
image
词云
ECharts入门
共写下评论 6559 条，以下词语出现频率较高
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);
image
简书 echarts mysql_echarts入门教程相关推荐
- 计算机代码新手入门教程,VJPAGE微简代码生成器新手快速入门教程
VJPAGE微简代码生成器新手快速入门教程: 第一步:新建项目 打开主菜单,文件->新建项目,输入项目名称:"我的项目",选择Jquery作为默认框架.单击确定按钮 第二步: ...
- echarts+ajax 入门教程
什么是echarts? echarts是百度旗下的一个制作页面图表的工具,它是一个使用 JavaScript 实现的开源可视化库,它可以将数据库的数据以折线图.饼状图等一系列形式展现在前端页面上.下面 ...
- 遗传算法 python 简书_遗传算法入门
遗传算法简介: 遗传算法(Genetic algorithm)属于演化计算( evolutionary computing),是随着人工智能领域发展而来的一种智能算法.正如它的名字所示,遗传算法是受达 ...
- 文科生学python简书_文科生Python教程（一）
往期传送门:文均:文科生Python教程(零)zhuanlan.zhihu.com (一)变量是什么?变量是个礼物盒! 在讲礼物盒之前,先帮张三解决他的问题. 在教程(零)中,张三想要统计<兰 ...
- pythonscatter简书_python plotly 使用教程
1.plotly介绍 lotly的Python图形库使互动的出版质量图表成为在线. 如何制作线图,散点图,面积图,条形图,误差线,箱形图,直方图,热图,子图,多轴,极坐标图和气泡图的示例. 推荐最好使 ...
- java 注解入门 简书_Java注解入门
Java注解(Annotation) 0.0 Hello World 先上代码,再加以说明.这样不至于让初学者懵. 例1 public class Dog extends Animal(){ @Ove ...
- android opengl 简书,Android OpenGL入门
如今VR这么火,感觉有必要先把OpenGL学好,为以后转VR奠定一些基础.一年前,接触过Android的OpenGL,当时是实现了在Android上显示标准的3D文件(STL格式).现在打算整理一下O ...
- python模拟登录爬虫 简书_python爬虫入门之模拟登陆新浪微博
很多网页浏览都需要首先登陆,比如说新浪微博.当然,这里有一个小技巧,用手机3G版登陆.电脑版会有各种加密,动态加载什么的.我们就耍一下小流氓,柿子拣软的捏么. 浏览器保持登陆是利用我们登陆时收到的co ...
- android realm 简书,Realm使用(入门篇)
Realm 介绍 什么是ORM? Android原生操作数据库的方式是这样的:首先定义一个类继承SQLiteOpenHelper,重写onCreate和onUpdate,后续对数据库的增删改查以及创建 ...
- WPF系列教程——(一)仿TIM QQ界面 - 简书
WPF系列教程--(一)仿TIM QQ界面 - 简书 原文: WPF系列教程--(一)仿TIM QQ界面 - 简书 TIM QQ 我们先来看一下TIM QQ长什么样,整体可以将界面分为三个部分 TIM ...
最新文章
- TF (transform) in ROS
- HTML特殊转义字符对照表
- SD 模块的几个增强
- IIS 5.0 和 6.0 的 ASP.NET 应用程序生命周期概述
- python爬虫进阶（初始）
- Maven阿里云与本地仓库配置
- wpf 图片绝对路径引用_Python Pillow 图片处理
- 第 15 章 垃圾回收相关算法
- 实时统计分析技术浅谈
- 6. PHP 正则表达式
- 最新emoji表情代码大全_微信表情包大全 百度输入法让你斗图斗到爽
- 文件系统读写性能测试实战
- Deep Multi-View Spatial-Temporal Network for Taxi Demand Prediction
- 小白易学--ps拼接图片教程之照片拼图
- matlab怎么定义矩阵变量_MATLAB01:基本的数学运算与矩阵运算
- 冶金物理化学复习 --- 典型熔渣模型
- 生物统计学(biostatistics)学习笔记（四）统计推断（已知样本推总体)
- 新浪顶级架构师保驾护航！国内首本大型分布式架构笔记浴火新生
- android文件管理器项目,GitHub - yangsmith/FileExplorer: android file explorer android文件管理器...
- 电机调速（PID算法）（程序原理图全套资料）
热门文章
- 考研必备数学公式大全（数学二）（高等数学篇）
- 单片机定时器一1ms12MHz_单片机原理及接口技术笔记1单片机概述
- 思科交换机配置试题_思科交换机配置命令(都是咱学过的总结)
- go模拟android浏览器,GO浏览器：界面酷炫操作顺畅Android浏览器
- Unity3D AssetStore下载文件/项目保存位置
- 软件测试计算机硬件 64,《计算机系统与系统软件》用AIDA64测试上机报告
- java 毕向东 内部类_毕向东Java视频学习笔记【Day10 多态+内部类】
- 软件质量管理体系 type:pdf_广河iso14001环境管理体系各种荣誉资质 - 广河商业服务...
- re模块或正则表达式
- 手把手教你创建 Alexa Smart Home Skill (二)