前言
好久没正经学习了。之前一直对数据可视化超级感兴趣的，好怀念以前自由自在，能学自己喜欢的东西的日子呀！
提示：以下是本篇文章正文内容，下面案例可供参考
一、ECharts是什么？
ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。
是一款有百度推出的可视化类库，文档全中文，学习十分友好。现已托管至apache。
二、ECharts入门案例
1.环境搭建
下载并将ECharts引入html文件
放置ECharts图表的容器必须是一个有大小的容器（如<div>，必须指定它的宽高）
ECharts使用JSON生成配置信息。下面详细讲讲每个配置的含义
代码如下（示例）：
color: 指定数据颜色(柱状条或线段)tooltip: 工具箱grid:定位图表的位置xAxis / yAxis: json数组,指定X/Y轴的信息series: 数据的展示方式与数据值的定义legend: 图例组件
这些配置会在下文给出详细解释
2.折线图与曲线图
代码如下（示例）：
option2 = {
title: {
text: '折线图'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['项目1', '项目2']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {
}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [
{
name: '项目1',
type: 'line',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '项目2',
type: 'line',
data: [220, 182, 191, 234, 290, 330, 310]
},
]
};
3.柱状图与进度条
(1).柱状图
<div id="barCharts" class="continer" style="width: 300px; height: 300px;"></div>
<script type="text/javascript">
var chart = echarts.init(document.getElementById('barCharts'));
option = {
color:['#c33'],
tooltip:{
trigger:'axis',
axisPointer:{
type:'shadow',
},
},
toolbox: {
feature: {
saveAsImage: {
} //保存为图片
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true //区域是否包含坐标轴的刻度标签
},
xAxis: [ //json数组
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], //X轴标签
axisTick: {
alignWithLabel: true //刻度对于柱状条居中
}
}
],
yAxis: [
{
type: 'value' //纵坐标
}
],
series: [
{
name: '销售额', //数据标注
type: 'bar', //柱状图
barWidth: '50%', //柱状条宽度
data: [10, 52, 200, 334, 390, 330, 220] //纵轴数据
}
]
};
chart.setOption(option);
</script>
(2).进度条
4.饼图
var option03 = {
toolbox:{
feature: {
saveAsImage: {
}
}
},
series : [
{
name: '数据',
type: 'pie',
radius: '55%',
roseType: 'angle',
data:[
{
value:235, name:'项目1'},
{
value:274, name:'项目2'},
{
value:310, name:'项目3'},
{
value:335, name:'项目4'},
{
value:400, name:'项目5'}
]
}
]
};
三、总结
对于这种类库,说白了就是在考验使用者会不会抄,能不能看懂代码. 对于简单的入门 , 是非常非常容易的.