使用技术2.

前提声明这个项目是只有前端页面所有的数据都是虚假的没有与后端对接

使用技术

dt.getSeconds();//获取秒document.querySelector(.showTime).innerHTML

当前时间

url(../images/line\(1\).png);padding:

0.1875rem

classno-hdulli125811/lili104563/li/ul/divdiv

classno-bdulli前端需求人数/lili市场供应人数/li/ul/div/divdiv

classmapdiv

url(../images/lbx.png);opacity:

0.6;animation:

url(../images/jt.png);animation:

rotate1

国外的前端数据可视化库非商用免费被许多国外大公司所使用AntV

等等Highcharts

和移动设备上兼容当前绝大部分浏览器IE8/9/10/11ChromeFirefoxSafari等底层依赖矢量图形库

ZRender提供直观交互丰富可高度个性化定制的数据可视化图表。

大白话

是一个JS插件性能好可流畅运行PC与移动设备兼容主流浏览器提供很多常用图表且可定制。

折线图、柱状图、散点图、饼图、K线图

官网地址https://www.echartsjs.com/zh/index.html

10.

官方教程[五分钟上手ECharts](https://www.echartsjs.com/zh/tutorial.html#5

分钟上手

https://github.com/apache/incubator-echarts/tree/4.5.0

使用步骤

600px;height:400px;/div初始化echarts实例对象

var

echarts.init(document.getElementById(main));指定配置项和数据(option)

var

决定自己的图表类型大白话图标数据指定什么类型的图标可以多个图表重叠。

xAxis直角坐标系

true这时候刻度只是作为分隔线标签和数据点都会在两个刻度之间的带(band)中间。

yAxis直角坐标系

echarts.init(document.querySelector(.bar

.chart));//

把配置给实例对象myChart.setOption(option);

})();根据需求定制

window.addEventListener(resize,

function()

echarts.init(document.querySelector(.bar2

.chart));//

传进来的是柱子对象console.log(params);//

dataIndex

myColor[params.dataIndex];}},//

10,//

把配置给实例对象myChart.setOption(option);

})();14.

修改折线图大小显示边框设置颜色#012f4a并且显示刻度标签。

设置网格样式grid:

刻度去除x轴刻度标签字体颜色#4c9bfd剔除x坐标轴线颜色将来使用Y轴分割线)轴两端是不需要内间距

boundaryGap

echarts.init(document.querySelector(.line

.chart));//

[1月,2月,3月,4月,5月,6月,7月,8月,9月,10月,11月,12月],axisTick:

{show:

把配置给实例对象myChart.setOption(option);//

让图表跟随屏幕自动的去适应window.addEventListener(resize,

function()

console.log($(this).index());//

console.log(yearData[$(this).index()]);var

obj

yearData[$(this).index()];option.series[0].data

obj.data[0];option.series[1].data

obj.data[1];//

需要重新渲染myChart.setOption(option);});

})();15.

rgba(255,255,255,.1)}},axisLabel:

{textStyle:

echarts.graphic.LinearGradient(0,0,0,1,[{offset:

0,color:

echarts.graphic.LinearGradient(0,0,0,1,[{offset:

0,color:

01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,26,28,29,30],

series

[#065aab,#066eab,#0682ab,#0696ab,#06a0ab,],//

让图表跟随屏幕自动的去适应window.addEventListener(resize,

function()

window.addEventListener(resize,

function()

社区就是一些活跃的echart使用者交流和贡献定制好的图表的地方。

在这里可以找到一些基于echart的高度定制好的图表相当于基于jquery开发的插件这里是基于echarts开发的第三方的图表。

ECharts

第一需要下载china.js提供中国地图的js文件第二个因为里面代码比较多我们新建一个新的js文件

myMap.js

#0b1c2d}}},总结这例子是扩展案例社区里面面还有很多的案例。

20.