ECharts特性
一个纯 Javascript 的图表库,提供了常规的折线图,柱状图,散点图,饼图,K线图,用于统计的盒形图,用于地理数据可视化的地图,热力图,线图,用于关系数据可视化的关系图,treemap,多维数据可视化的平行坐标,还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭。
引入Js
只需要像普通的 JavaScript 库一样用 script 标签引入。
<script src="js/echarts/echarts.min.js"></script>
HTML
在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。
<div class="echarts-right" id="my-charts" style="width:500px;height:500px;"></div>
设置参数、初始化图表
var option = {
color: ['#3398DB'],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'直接访问',
type:'bar',
barWidth: '60%',
data:[10, 52, 200, 334, 390, 330, 220]
}
]
};
//初始化echarts实例
var myChart = echarts.init(document.getElementById('my-charts'));
//使用制定的配置项和数据显示图表
myChart.setOption(option);
更多样式参考 http://echarts.baidu.com/index.html