使用echarts绘制图表

前端 echarts

创建时间:2023-12-13 22:17

阅读:

1.介绍
2.vue使用echarts步骤
3.折线图
4.饼图

1.介绍

ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。
图表示例地址：https://echarts.apache.org/examples/zh/index.html
配置项文档：https://echarts.apache.org/zh/option.html#title

2.vue使用echarts步骤

1.安装包
npm install echarts

2.基础demo地址
https://github.com/wwsit/python_files/blob/master/003_qianduan_files/004_echats/001_echarts.vue

3.折线图

代码地址：
https://github.com/wwsit/python_files/blob/master/003_qianduan_files/004_echats/002_%E5%A4%9A%E6%8A%98%E7%BA%BF%E5%9B%BE.vue
功能点介绍：
    1.显示多根折线图
    2.坐标轴倾斜显示
    3.鼠标悬浮会显示数值
    4.将数据导出成图片
    5.显示主题+图例

4.饼图

代码地址：
https://github.com/wwsit/python_files/blob/master/003_qianduan_files/004_echats/003_%E9%A5%BC%E5%9B%BE.vue

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。