汉服网站建设毕业设计,牡丹江网络推广公司,网站建设推广费怎么做账,免费素材网站排行榜文章目录 Echarts1. 介绍2. 体验NPM 安装 Echarts定义 Echarts 容器引入 Echarts 3. 基础配置 Echarts
1. 介绍
常见的数据可视化库#xff1a;
D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难)ECharts.js 百度出品的一个开源 Javascript 数据可视化库Highch… 文章目录 Echarts1. 介绍2. 体验NPM 安装 Echarts定义 Echarts 容器引入 Echarts 3. 基础配置 Echarts
1. 介绍
常见的数据可视化库
D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难)ECharts.js 百度出品的一个开源 Javascript 数据可视化库Highcharts.js 国外的前端数据可视化库非商用免费被许多国外大公司所使用AntV 蚂蚁金服全新一代数据可视化解决方案 等等Highcharts 和 Echarts 就像是 Office 和 WPS 的关系 ECharts一个使用 JavaScript 实现的开源可视化库可以流畅的运行在 PC 和移动设备上兼容当前绝大部分浏览器IE8/9/10/11ChromeFirefoxSafari等底层依赖矢量图形库 ZRender提供直观交互丰富可高度个性化定制的数据可视化图表。 大白话
是一个JS插件性能好可流畅运行PC与移动设备兼容主流浏览器提供很多常用图表且可定制。 折线图、[柱状图](Examples - Apache ECharts)、散点图、饼图、K线图
2. 体验
NPM 安装 Echarts
你可以使用如下命令通过 npm 安装 Echarts
npm install echarts --save定义 Echarts 容器
div idmain stylewidth: 600px;height:400px;/div引入 Echarts
import * as echarts from echarts;// 基于准备好的dom初始化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]}]
});3. 基础配置 需要了解的主要配置series xAxis yAxis grid tooltip title legend color 完整配置 series 系列列表。每个系列通过 type 决定自己的图表类型大白话图标数据指定什么类型的图标可以多个图表重叠。 xAxis直角坐标系 grid 中的 x 轴 boundaryGap: 坐标轴两边留白策略 true这时候刻度只是作为分隔线标签和数据点都会在两个刻度之间的带(band)中间。 yAxis直角坐标系 grid 中的 y 轴 grid直角坐标系内绘图网格。 title标题组件 tooltip提示框组件 legend图例组件 color调色盘颜色列表 数据堆叠同个类目轴上系列配置相同的stack值后 后一个系列的值会在前一个系列的值上相加。
