欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ECharts 前端数据可视化

程序员文章站 2022-03-10 16:20:43
...

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>
相关标签: 数据可视化