Echart - 最好最强大效果最丰富的可视化图表插件
插件 效果 可视化 强大 最好 图表 丰富 Echart
2023-09-11 14:16:39 时间
# 官网
http://echarts.baidu.com/
# demo
http://echarts.baidu.com/gallery/index.html
Echart
npm install echarts --save
demo1 : 从简单的柱状图开始
核心知识点【setOption参数介绍】:http://echarts.baidu.com/option.html#title
var echarts = require('echarts'); var myChart = echarts.init(document.getElementById('main')); myChart.setOption({ title: { text: 'ECharts 入门示例' }, tooltip: {}, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] });
demo2 : 异步数据加载和更新
ECharts 由数据驱动,数据的改变驱动图表展现的改变,因此动态数据的实现也变得十分简单。
var echarts = require('echarts'); var myChart = echarts.init(document.getElementById('main')); myChart.showLoading(); // 显示标题,图例和空的坐标轴 myChart.setOption({ title: { text: '异步数据加载示例' }, tooltip: {}, xAxis: { data: [] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [] }] }); setTimeout(function () { myChart.hideLoading(); // 填入数据 myChart.setOption({ xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, series: [{ // 根据名字对应到相应的系列 name: '销量', data: [5, 20, 36, 10, 10, 20] }] }); },2000);
相关文章
- jQuery插件开发详细教程
- Visual Event插件----查看html元素绑定的事件与方法的利器
- 组件&插件化之复习
- jquery压缩图片插件
- Jquery焦点图/幻灯片效果 插件 KinSlideshow
- 通过Onvif设备探索获取EasyNVR网页无插件播放所需要的摄像机硬盘录像机NVR的RTSP地址
- [YOLOv7/YOLOv5系列改进NO.39]引入改进遮挡检测的Tri-Layer插件 | BMVC 2022
- select2 插件加载后端数据
- 【Android Gradle 插件】ProductFlavor 配置 ( ProductFlavor#manifestPlaceholders 清单文件占位符配置 )
- 记得12306货运系统“抢购空”编写插件--chrome交互式插件的各个部分
- pytest接口自动化测试框架 | pytest常用插件
- 226:vue+openlayers利用swipe插件实现左卷帘功能
- Unity的NGUI插件篇——入场效果
- vscode安装了Live Server插件后,用Open with Live Server运行本地html文件,页面出现选择文件打开的效果,目录是~/,页面标题是listing directory
- 存储插件 FlexVolume
- es-head插件插入查询以及条件查询(五)