前端:利用Echart实现数据可视化

先看几个效果图:

前端:利用Echart实现数据可视化_第1张图片

前端:利用Echart实现数据可视化_第2张图片

前端:利用Echart实现数据可视化_第3张图片

 

官方文档:https://www.echartsjs.com/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

本人见过最为全面、详细、方便的官方文档了。

开始教程:

 

首先下载echarts.js库:https://www.echartsjs.com/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts给出了4中下载方法。

引入js文件:


html有一个div标签:

接下来在js脚本中配置参数,实现渲染:




    
    ECharts
    
    


    
    

最终效果:

前端:利用Echart实现数据可视化_第4张图片

 

在贴一个饼状图的例子:

效果图:

前端:利用Echart实现数据可视化_第5张图片

 

 

你可能感兴趣的:(前端)