扁平化蓝色网站,h5免费制作网站,书店网站建设设计方案,wordpress缓存删除了有什么后果文章目录前言学习 ECharts 的方法快速上手基础知识option 配置选项可选配置title 标题组件tooltip 提示框组件axisPointer 坐标轴指示器legend 图例组件toolbox 工具栏坐标轴xAxis和yAxisseries #xff08;[ ]用数组表示,数组里是一个个数据对象#xff09;饼状图散点图交互…
文章目录前言学习 ECharts 的方法快速上手基础知识option 配置选项可选配置title 标题组件tooltip 提示框组件axisPointer 坐标轴指示器legend 图例组件toolbox 工具栏坐标轴xAxis和yAxisseries [ ]用数组表示,数组里是一个个数据对象饼状图散点图交互组件异步数据加载事件处理前言 主要是掌握基础语法和四个基本图表以及对数据的动态更新
考题形式 要用好官网看api和实例。Echarts 实际开发中肯定就是拿到官网的代码进行修改了
我现在发现蓝桥杯还是要学一学他官网的内容因为有些东西你内容掌握了但是你可能蓝桥杯的题目没读懂没有适应它的考察方式最后拿不到高分就得不偿失。
在虚拟环境中无法装扩展我想是不是可以到时候考试的时候拷到本地来写这样就有扩展可以快一些
学习 ECharts 的方法
1.你要确定好你想绘制图表的效果 2.在官网找到类似的图在所给代码的基础上加以修改 3.需要添加什么属性可以再去配置项库中查找 4.如果是从未接触过的配置项建议在网上搜索一般会找到答案。
快速上手
实现流程 1.准备一个DOM元素作为ECharts的容器 2.基于DOM元素创建一个ECharts实例 echarts.init 3.指定配置项和数据 option从名字就可以看出是配置选项 4.最后一步千万别忘了 将配置项设置给 echarts 实例对象。 instance.setOptionoption body!-- 为 ECharts 准备一个宽为 600px高为 400px 的 DOM --div idmain stylewidth:600px;height:400px;/div/bodyscriptvar chartDom document.getElementById(main);// 初始化实例对象 echarts.init(dom) 容器;var myChart echarts.init(chartDom);// 指定配置项和数据var option {xAxis: {type: category,data: [Mon, Tue, Wed, Thu, Fri, Sat, Sun],},yAxis: {type: value,},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: line,},],};// 将配置项设置给 echarts 实例对象。 别忘了这一步myChart.setOption(option);/script
/html最后的实现效果
基础知识
一个网页中可以创建多个 ECharts 实例。每个 ECharts 实例中可以创建多个图表和坐标系等等多个series。准备一个 DOM 节点作为 ECharts 的渲染容器就可以在上面创建一个 ECharts 实例。每个 ECharts 实例独占一个 DOM 节点。 option 配置选项
我觉得用配置选项来描述它更为合适进行一系列的配置例如坐标轴和展示类型等等。 用一张图来理解 xAxis直角坐标系 X 轴、yAxis直角坐标系 Y 轴、grid直角坐标系底板 visualMap视觉映射组件、tooltip提示框组件 toolbox工具栏组件、series系列数据、legend图例组件
可选配置 title 标题组件 title 标题 { }text是内容show是显示
tooltip 提示框组件 tooltip 提示框组件。
tooltip:{ trigger: item }触发类型。
item
数据项图形触发主要在散点图饼图等无类目轴的图表中使用。
axis
坐标轴触发主要在柱状图折线图等会使用类目轴的图表中使用。
none
什么都不触发。axisPointer 坐标轴指示器
坐标轴指示器是指示坐标轴当前刻度的工具需要在tooltip里搭配使用 也就是说里面包含的属性都是与坐标轴的设置相关。
type选项 包含 line直线指示器、shadow阴影指示器、none无指示器、cross十字准星指示器这四种类型。 一般来说shadow和cross比较常用cross可以显示股票那种效果。
tooltip.axisPointer.crossStyle.color 用于设置线的颜色。
tooltip{
type:axis,axisPointer: {type: cross,//会有两根相交线}} legend 图例组件
在样式上可以有很多配置 例 orientvertical 就是竖直 leftleft 组件就在左边同理可得上下左右
itemWidth 和 itemHeight 分别是图例的宽度和高度图例就是item
但是一般使用就只需要写 legend: {}, 就会显示对应的图例这些名字是在series的name里定义。 但是还有一种写法就是写个data[ ],把series里面的数据名字都写进去 toolbox 工具栏
内置有导出图片saveAsImage、数据视图dataView、动态类型切换magicType、数据区域缩放dataZoom、重置restore等五个工具。 只要feature里写上就可以了
toolbox: {feature: {saveAsImage: {}}
},导出图片saveAsImage dataView直接把数据显示出来 toolbox.feature.dataView
坐标轴
xAxis直角坐标系 X 轴。yAxis直角坐标系 Y 轴。grid直角坐标系网格。
网格grid是定义网格布局、大小和颜色的组件用于定义直角坐标系整体的布局。 几个常用的属性分别是
show 是否显示直角坐标系网格。left 是 grid 组件离容器左侧的距离。top 是 grid 组件离容器上侧的距离。right 是 grid 组件离容器右侧的距离。bottom 是 grid 组件离容器下侧的距离。 grid: {left: 3%,right: 4%,bottom: 3%,containLabel: true,//grid 区域是否包含坐标轴的刻度标签,默认fasle},grid.containLabel 设置 grid 区域是否包含坐标轴的刻度标签默认为 false。 这里要理解的是容器就是这个DOM元素有点像绝对定位父亲是DOM元素 xAxis和yAxis
type 是坐标轴类型其类型有以下几种
value 是数值轴适用于连续数据。一般是y轴category 是类目轴适用于离散的类目数据。一般是x轴time 是时间轴适用于连续的时序数据与数值轴相比时间轴带有时间的格式化在刻度计算上也有所不同。log 是对数轴。适用于对数数据。
min/max设置最小最大值
xAxis.data 是类目数据。 一般在x轴中使用类型必须是category无type则 默认是category 需要注意的是它只在类目轴type: ‘category’中有效。如果没有设置 type但是设置了 axis.data则认为 type 是 ‘category’。 如果设置了 type 是 ‘category’但没有设置 axis.data则 axis.data的内容会自动从 series.data 中获取。 yAxis.axisLabel.formatter 是设置坐标轴单位的 axisLabel: {formatter: {value} 万,show:true,//设置是否显示刻度},xAxis.splitLine.show 设置是否显示分隔线。 yAxis.axisLine.show 设置是否显示坐标轴线。 yAxis.inverse 设置是否反向坐标轴。 series [ ]用数组表示,数组里是一个个数据对象
系列series是指一组数值以及这些数值映射成的图。一系列的数据和图
参数一组数值data、图表类型type、以及(关于这些数据如何映射成图的)参数。
typeline折线图、bar柱状图、pie饼图、scatter散点图等等
name 是系列的名字。
stack 是数据堆叠同个类目轴上系列配置相同的 stack 值后后一个系列的值会在前一个系列的值上相加。 这里也标明了一个echarts实例中可以创建多个图表和坐标系。
这个时候再看series里面一个数据对象就是一个图。
areaStyle: { } 区域填充样式。设置后显示成区域面积图面积就会有颜色填充。 series-bar.barWidth 设置条柱的宽度。 series.smooth 设置是否平滑曲线显示。 series.showSymbol 是否显示 symbol也就是图上的数据点默认为 true。
饼状图
在series里配置 series.radius 设置饼形的半径。
series.center 设置饼图的中心圆心坐标数组的第一项是横坐标第二项是纵坐标。 series.roseType 设置是否展示成南丁格尔图通过半径区分数据大小有两种模式
radius 区圆心角展现数据的百分比半径展现数据的大小。area 所有扇区圆心角相同仅通过半径展现数据大小。 series.itemStyle.borderRadius 用于指定饼图扇形区块的内外圆角半径。会变成不规则的圆 series-pie.labelLine.length 是视觉引导线第一段的长度。连接到图表的长度 series-pie.labelLine.length2 是连接到文字的线长度一般比第一个多5 但是我没看出来差别 散点图
这个就比较复杂了只做一个记录。可以看出来蓝桥的课做的还是很用心的。
tooltip.backgroundColor 是提示框浮层的背景颜色。 tooltip.formatter 是用来设置提示浮层内容显示的格式它支持字符串模板和回调函数两种形式。
实在是太多了就不记录了有需要去看看原课程吧 交互组件 直接看这篇文章吧写的太好了交互组件
异步数据加载
这里的数据是我们定义好的但是现实中肯定是在数据库里拿的这个时候就要用到异步数据加载 通过使用 jQuery 等工具异步获取数据并填入 setOption 中。 $.get(data.json,function (data) {myChart.setOption({title: {text: 电影类型,left: center,},tooltip: {trigger: item,},legend: {orient: vertical,left: left,},series: [{type: pie,radius: 55%,data: data.data_pie, // 数据},],});},json);其实除了加载数据设置图表实例的配置项、数据、万能接口、所有参数和数据的修改都可以通过 setOption 来完成ECharts 会合并新的参数和数据然后刷新图表。 如果开启动画配置项的话ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。 也就是说只要数据改变echarts会自动更新表格 事件处理
myChart.on(事件名称, 回调函数);//和js一样 myChart是实例在 ECharts 中支持的常见鼠标事件有以下几种
click点击鼠标时触发。dblclick在同一个元素上双击鼠标时触发。mouseup释放按下的鼠标键时触发。mousedown按下鼠标键时触发。mousemove当鼠标在一个节点内部移动时触发。mouseover鼠标进入一个节点时触发。mouseout鼠标离开一个节点时触发。globalout鼠标移出坐标系触发。contextmenu打开上下文菜单时被触发
例子 var option {series: [{name: 人气,type: pie,radius: 50%,data: [{ value: 35, name: 数据库 },{ value: 48, name: 后端开发 },{ value: 24, name: 信息安全 },{ value: 30, name: 人工智能 },],},],};myChart.setOption(option);// 处理点击事件并且跳转到相应的课程页面myChart.on(click, function (params) {console.log(params.name);window.open(https://www.lanqiao.cn/courses/?category params.name);});params是series中的data
