ECharts，一个使用 JavaScript 实现的开源可视化库，百度出品，底层依赖轻量级的矢量图形库ZRender，兼容大部分PC和移动端的浏览器，提供直观，交互丰富，可高度个性化定制的数据可视化图表。看看http://echarts.baidu.com/feature.html的示例，真心不错。

快速入手

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js,下载至本地 http://www.echartsjs.com/download.html-->
    <script src="echarts.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // api详见http://echarts.baidu.com/api.html
        // 初始化echarts对象
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
		    title: { text: 'ECharts'},
		    tooltip: {  show: true }, //提示框
		    toolbox: { //工具栏
		        show: true,
		        feature: {
		            dataView: {readOnly: false},
		            saveAsImage: {},
		            dataZoom: {}
		        }
		    },
		    legend: {  data:['利润','销量'] },//图例
		    xAxis: { //横轴
		        type: 'category',  data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
		    },
		    yAxis: [ //纵轴*2
		    { type: 'value', name: '利润', scale: true, min: 0, max: 5000 },
		    { type: 'value', name: '销量',  scale: true, min: 0,   max: 50 } ],
		    series: [  //数据
		    { name: '利润',  type: 'line', data: [1000,3000,5000,2000,1500,4000]  }, //折线图
		    { name: '销量', yAxisIndex: 1,  type: 'bar', data: [5, 20, 36, 10, 10, 20] } //直方图
		    ]
};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

ECharts 前端数据可视化

快速入手

猜你喜欢