使用 JavaScript 实现的开源可视化库-ECharts

为什么选择Echarts

1、上手快,只需要简单的配置即可生成各种图形
2、百度开源项目,文档全,社区活跃(之前人保项目使用过的chart.js国外开源框架,中文文档较少)
3、实例丰富,可以适用各种各样的功能
4、跨平台使用,支持PC端及移动端,从 4.0 开始提供了对微信小程序的适配,支持node上的服务端渲染

Echarts简介

ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。

简单使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Echarts简单使用</title>
    <script type="text/javascript" src='https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.js'></script>
</head>
<body>
    <div id="chart" style="width:400px;height:400px;"></div>
</body>
<script type="text/javascript">
    // 初始化图表标签
    var myChart = echarts.init(document.getElementById('chart'));
    var options={
        //定义一个标题
        title:{
            text:'Echarts标题'
        },
        legend:{
            data:['数据']
        },
        //X轴设置
        xAxis:{
            data:['60','70','80','90','100']
        },
        yAxis:{
        },
        //name=legend.data的时候才能显示图例
        series:[{
            name:'数据',
            type:'bar',
            data:['12','32','45','21','1']
        }]

    };
    myChart.setOption(options);
</script>
</html>

1、引入Echarts的cdn
https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.js
2、为Echarts创建一个底层容器div,并设置div的宽高


3、初始化图表
var myChart = echarts.init(document.getElementById('chart'));
4、设置参数
myChart.setOption(options);
具体的option参数参照官网https://www.echartsjs.com/option.html,Echarts会根据不同的配置项渲染生成不同的图表,Echarts的配置项有很多,全记住的话不太现实,建议根据具体使用场景再查阅官网文档

相关连接

1、Echarts配置项 https://www.echartsjs.com/option.html
2、官方实例https://www.echartsjs.com/examples/
3、官方教程https://www.echartsjs.com/tutorial.html

你可能感兴趣的:(js,Echarts)