营业推广是什么北京企业网站seo平台

当前位置： 首页 > news >正文

营业推广是什么,北京企业网站seo平台,网站申请支付宝接口,小程序开发平台好的有哪些✍前端ECharts可视化框架完结 #x1f525;前端ECharts可视化框架完结地址#x1f525;前端ECharts可视化框架快速上手详解(一)https://blog.csdn.net/Augenstern_QXL/article/details/119850486#x1f525;前端ECharts可视化框架快速上手详解(二)https://blog.csdn.net/A…✍前端ECharts可视化框架完结 前端ECharts可视化框架完结地址前端ECharts可视化框架快速上手详解(一)https://blog.csdn.net/Augenstern_QXL/article/details/119850486前端ECharts可视化框架快速上手详解(二)https://blog.csdn.net/Augenstern_QXL/article/details/119941890前端ECharts可视化框架快速上手详解(三)https://blog.csdn.net/Augenstern_QXL/article/details/119965935 官方文档讲解较细致但同时也较繁琐本篇旨在记录常用样式的用法与注意点.参考视频 玩转ECharts可视化框架Pink老师前端ECharts框架学习
1、Echarts高级 1、显示相关 1.1、主题 1.1.1、内置主题 ECharts 中默认内置了两套主题light、dark 在初始化对象方法 init 中可以指明 init 方法有两个参数第一个参数代表是一个 dom 节点第二个参数代表你需要使用哪一套主题
var chart echarts.init(dom,light); var chart echarts.init(dom,dark);body!– 1.准备一个具备大小的 DOM 容器 –div stylewidth: 600px;height: 400px/divscript// 2.初始化echarts实例化对象var myChart echarts.init(document.querySelector(div), dark);// 3.指定图表的配置项和数据var option {series: [{type: gauge,data: [{value: 97,// 指针样式}],min: 50, // min max 控制仪表盘数值范围}]}// 4.使用刚指定的配置项和数据显示图表。myChart.setOption(option);/script /body1.1.2、自定义主题 在主题编辑器中编辑主题(下载-主题下载-定制主题-下载主题) 地址https://echarts.apache.org/zh/theme-builder.html 下载主题是一个 js 文件 引入主题 js 文件 script srctheme/itcast.js载 init 方法中引入 主题 js 文件
var myCharts echarts.init(document.querySelector(div),itcast);第二个参数要和我们下载的主题中 echarts.registerTheme 的第一个参数相同 1.2、调色盘 它是一组颜色图形系列会自动从其中选择颜色 1.2.1、主题调色盘 主题调色盘就是 1.1 所介绍的 1.2.2、全局调色盘 在 option 下设置 color是一个数组 option: {color:[red,green,blue], }1.2.3、局部调色盘 在 series 下 设置 color是一个数组 series:[{type: bar,color: [red,green,blue],} ]1.3、颜色渐变 1.3.1、线性渐变 在 series 下设置 itemStyle itemStyle: {color: {type: linear, // 线性渐变x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: red}, // 0%处的颜色{offset: 1,color: blue}, // 100%处的颜色],globalCoord: false, // 缺省为 false },}1.3.2、径向渐变 在 series 下设置 itemStyle itemStyle: {color: {type: radial, // 径向渐变x: 0.5,y: 0.5,r: 0.5,colorStops: [{offset: 0,color: red}, // 0%处的颜色{offset: 1,color: blue}, // 100%处的颜色],globalCoord: false, // 缺省为 false },}1.4、样式 1.4.1、直接样式 itemStyle、textStyle、lineStyle、areaStyle、label 1.4.2、高亮样式 在 emphasis 中包裹 itemStyle、textStyle、lineStyle、areaStyle、label 1.5、自适应 当浏览器的大小发生变化的时候如果想让图表也能随之适配变化 监听窗口大小变化事件在事件处理函数中调用 ECharts 实例对象的 resize 即可 windwo.onresize function(){myChart.resize(); }body!– 1.准备一个具备大小的 DOM 容器 –div styleheight: 400px;border:1px solid red/divscript// 2.初始化echarts实例化对象var myChart echarts.init(document.querySelector(div));// 3.指定图表的配置项和数据var option {series: [{type: gauge,data: [{value: 97,// 指针样式}],min: 50, // min max 控制仪表盘数值范围}]}// 4.使用刚指定的配置项和数据显示图表。myChart.setOption(option);//监听window窗口大小变化的事件window.onresize function() {myChart.resize();}/script /body2、动画的使用 2.1、加载动画 ECharts 已经内置好了加载数据的动画我们只需要在合适的时机显示或者隐藏即可 显示加载动画、隐藏加载动画myCharts.showLoading()、myCharts.hideLoading()一般我们的数据是从服务器获取当数据过多时图表加载不出来此时的界面是不友好的我们可以在获取数据之前显示加载动画当数据获取完成隐藏加载动画 2.2、增量动画 当我们的图表已经加载完成但是此时数据发生了变化图表就要相应变化这就是增量动画 myCharts.setOption(option) body!– 1.准备一个具备大小的 DOM 容器 –div stylewidth: 600px;height: 400px/divbutton idmodify修改数据/buttonbutton idadd增加数据/buttonscript// 2.初始化echarts实例化对象var myChart echarts.init(document.querySelector(div));// 3.指定图表的配置项和数据var xDataArr [张三, 李四, 王五, 闰土, 小明, 茅台, 蘑菇头, 王炸, ];var yDataArr [88, 92, 63, 77, 94, 80, 72, 86];var option {xAxis: {type: category,data: xDataArr,},yAxis: {type: value,},series: [{name: 语文,type: bar,data: yDataArr,}],};// 4.使用刚指定的配置项和数据显示图表。myChart.setOption(option);// 修改数据var btnModify document.querySelector(#modify);btnModify.onclick function() {var newYDataArr [68, 32, 99, 77, 94, 80, 72, 86];var option {series: [{data: newYDataArr,}]}// setOption 可以设置多次// 新的 option 和 旧的 option 是相互整合的关系// 我们在设置新的 option的时候只需要考虑变化的数据myChart.setOption(option);};// 增加数据var btnAdd document.querySelector(#add);btnAdd.onclick function() {xDataArr.push(小明);yDataArr.push(90);var option {xAxis: {data: xDataArr,},series: [{data: yDataArr,}]}myChart.setOption(option);}/script /body2.3、动画配置 设置在 option 之下的 开启动画、动画时长、缓动动画、动画阈值单种形式的元素数量大于这个阈值时会关闭动画animation:true、animationDuration:5000、animationEasing:bounceOut、animationThreshold: 8 3、交互API 全局 echarts 对象全局 echarts 对象是引入 echarts.js 文件之后就可以直接使用的对象 echartsInstance对象echartsInstance 对象是通过 echarts.init 方法调用之后得到的 3.1、全局 echarts 对象 initregisterThemeregisterMapconnect 3.1.1、init 初始化 ECharts 实例对象使用对象 // 2.初始化echarts实例化对象,且使用内置主题 var myChart echarts.init(document.querySelector(div), dark);3.1.2、registerTheme 注册主题只有注册过的主题才能在 init 方法中使用该主题1 3.1.2、registerMap 注册地图数据 \(.get(json/map/china.json,function(chinaJson) {echarts.registerMap(china,chinaJson); })geo 组件使用地图数据 var option {geo: {type: map,map: china,} }3.1.4、connect 方法 一个页面中可以有多个独立的图表每一个图表对应一个 ECharts 实例对象connect 可以实现多图关联传入联动目标为 ECharts 实例对象支持数组 保存图片的自动拼接刷新按钮重置按钮提示框联动、图例选择等 !DOCTYPE html html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0script src../js/echarts.min.js/scripttitleDocument/titlescript srcjs/echarts.min.js/scriptscript srcjs/jquery.min.js/script /headbody div stylewidth: 600px;height:400px;border: 1px solid red/divdiv stylewidth: 600px;height:400px;border: 1px solid green iddiv1/divscriptvar mCharts echarts.init(document.querySelector(div), itcast)var xDataArr [张三, 李四, 王五, 闰土, 小明, 茅台, 二妞, 大强]var yDataArr [88, 92, 63, 77, 94, 80, 72, 86]var option {toolbox: {feature: {saveAsImage: {}}},xAxis: {type: category,data: xDataArr},yAxis: {type: value},series: [{type: bar,data: yDataArr,markPoint: {data: [{type: max, name: 最大值},{type: min, name: 最小值}]},markLine: {data: [{type: average, name: 平均值}]},label: {show: true,rotate: 60},barWidth: 30%}]}mCharts.setOption(option)var mCharts2 echarts.init(document.querySelector(#div1))\).get(json/map/china.json, function(ret){echarts.registerMap(aa, ret)var option2 {geo: {type: map,map: aa}}mCharts2.setOption(option2)// echarts.connect([mCharts, mCharts2]) // 将柱状图和地图关联起来})/script /body/html3.2、echartsInstance对象 3.2.1、setOption方法 设置或修改图表实例的配置项以及数据多次调用 setOption 方法 合并新的配置和旧的配置增量动画
bodydiv stylewidth: 600px;height:400px/divbutton idmodify修改数据/buttonbutton idadd增加数据/buttonscriptvar mCharts echarts.init(document.querySelector(div))var xDataArr [张三, 李四, 王五, 闰土, 小明, 茅台, 二妞, 大强]var yDataArr [88, 92, 63, 77, 94, 80, 72, 86]var option {xAxis: {type: category,data: xDataArr},yAxis: {type: value},series: [{type: bar,data: yDataArr,markPoint: {data: [{type: max, name: 最大值},{type: min, name: 最小值}]},markLine: {data: [{type: average, name: 平均值}]},label: {show: true,rotate: 60},barWidth: 30%}]}mCharts.setOption(option)var btnModify document.querySelector(#modify)btnModify.onclick function () {var newYDataArr [68, 32, 99, 77, 94, 80, 72, 86]// setOption 可以设置多次// 新的option 和 旧的option// 新旧option的关系并不是相互覆盖的关系, 是相互整合的关系// 我们在设置新的option的时候, 只需要考虑到变化的部分就可以var option {series: [{data: newYDataArr}]}mCharts.setOption(option)}var btnAdd document.querySelector(#add)btnAdd.onclick function(){xDataArr.push(小明)yDataArr.push(90)var option {xAxis: {data: xDataArr},series: [{data: yDataArr}]}mCharts.setOption(option)}/script /body3.2.2、resize方法 重新计算和绘制图表一般和 window 对象的 resize 事件结合使用 div styleheight:400px;border: 1px solid red/divscriptvar mCharts echarts.init(document.querySelector(div))var xDataArr [张三, 李四, 王五, 闰土, 小明, 茅台, 二妞, 大强]var yDataArr [88, 92, 63, 77, 94, 80, 72, 86]var option {xAxis: {type: category,data: xDataArr},yAxis: {type: value},series: [{type: bar,data: yDataArr,markPoint: {data: [{type: max, name: 最大值},{type: min, name: 最小值}]},markLine: {data: [{type: average, name: 平均值}]},label: {show: true,rotate: 60},barWidth: 30%}]}mCharts.setOption(option)// 监听window窗口大小变化的事件window.onresize function(){// console.log(window.onresize…)// 调用echarts实例对象的resize方法mCharts.resize()}// window.onresize mCharts.resize/script /body3.2.3、on方法 绑定或者解绑事件处理函数 鼠标事件 常见事件‘click’、‘dblclick’、‘mousedown’、‘mousemove’、‘mouseup’ 等事件参数 arg和事件相关的数据信息 ECharts 事件 常见事件legendselectchanged、‘datazoom’、‘pieselectchanged’、‘mapselectchanged’ 等事件参数arg和事件相关的数据信息
bodydiv stylewidth: 600px;height:400px/divscriptvar mCharts echarts.init(document.querySelector(div))var pieData [{value: 11231,name: 淘宝,},{value: 22673,name: 京东},{value: 6123,name: 唯品会},{value: 8989,name: 1号店},{value: 6700,name: 聚美优品}]var option {legend: {data: [淘宝, 京东, 唯品会, 1号店, 聚美优品]},tooltip: {show: true},series: [{type: pie,data: pieData}]}mCharts.setOption(option)mCharts.on(click, function (arg) {console.log(arg)console.log(click…)}) // 对事件进行监听/script /body在官网如图我们可以看到 echartsInstance 的方法 bodydiv stylewidth: 600px;height:400px/divscriptvar mCharts echarts.init(document.querySelector(div))var pieData [{value: 11231,name: 淘宝,}, {value: 22673,name: 京东}, {value: 6123,name: 唯品会}, {value: 8989,name: 1号店}, {value: 6700,name: 聚美优品}]var option {legend: {data: [淘宝, 京东, 唯品会, 1号店, 聚美优品]},tooltip: {show: true},series: [{type: pie,data: pieData}]}mCharts.setOption(option)mCharts.on(click, function(arg) {console.log(arg)console.log(click…)}) // 对事件进行监听// 对图例组件进行监听mCharts.on(legendselectchanged, function(arg) {console.log(arg)console.log(legendselectchanged)})/script /body3.2.4、off方法 bodydiv stylewidth: 600px;height:400px/divbutton idbtn1触发行为/buttonbutton idbtn2clear/buttonbutton idbtn3setOption/buttonbutton idbtn4dispose/buttonscriptvar mCharts echarts.init(document.querySelector(div))var pieData [{value: 11231,name: 淘宝,},{value: 22673,name: 京东},{value: 6123,name: 唯品会},{value: 8989,name: 1号店},{value: 6700,name: 聚美优品}]var option {legend: {data: [淘宝, 京东, 唯品会, 1号店, 聚美优品]},tooltip: {show: true},series: [{type: pie,data: pieData}]}mCharts.setOption(option)mCharts.on(click, function (arg) {console.log(arg)console.log(click…)}) // 对事件进行监听mCharts.off(click) // 解绑click的事件/script /body3.2.5、dispathAction方法 触发某些行为使用代码模拟用户的行为 myCharts.dispatchAction({type: highlight, // 事件类型seriesIndex: 0, // 图表索引dataIndex: 1 // 图表中的哪一项高亮 })bodydiv stylewidth: 600px;height:400px/divbutton idbtn1触发行为/buttonscriptvar mCharts echarts.init(document.querySelector(div))var pieData [{value: 11231,name: 淘宝,},{value: 22673,name: 京东},{value: 6123,name: 唯品会},{value: 8989,name: 1号店},{value: 6700,name: 聚美优品}]var option {legend: {data: [淘宝, 京东, 唯品会, 1号店, 聚美优品]},tooltip: {show: true},series: [{type: pie,data: pieData}]}mCharts.setOption(option)\((#btn1).click(function () {// 模拟用户的行为mCharts.dispatchAction({type: highlight,seriesIndex: 0, // 系列的索引dataIndex: 1 // 数据的索引})mCharts.dispatchAction({type: showTip,seriesIndex: 0,dataIndex: 2})})/script /body3.2.6、clear方法 清空当前实例会移除实例中所有的组件和图表清空之后可以再次 setOption bodydiv stylewidth: 600px;height:400px/divbutton idbtn1触发行为/buttonbutton idbtn2clear/buttonbutton idbtn3setOption/buttonscriptvar mCharts echarts.init(document.querySelector(div))var pieData [{value: 11231,name: 淘宝,}, {value: 22673,name: 京东}, {value: 6123,name: 唯品会}, {value: 8989,name: 1号店}, {value: 6700,name: 聚美优品}]var option {legend: {data: [淘宝, 京东, 唯品会, 1号店, 聚美优品]},tooltip: {show: true},series: [{type: pie,data: pieData}]}mCharts.setOption(option)\)(#btn1).click(function() {// 模拟用户的行为mCharts.dispatchAction({type: highlight,seriesIndex: 0, // 系列的索引dataIndex: 1 // 数据的索引})mCharts.dispatchAction({type: showTip,seriesIndex: 0,dataIndex: 2})})\((#btn2).click(function() {// 清空图表的实例mCharts.clear()})\)(#btn3).click(function() {// 重新设置optionmCharts.setOption(option)})/script /body3.2.7、dispose方法 销毁实例,展示的效果和 clear 一样但是无法再 setOption() 展示销毁后实例无法再被使用 bodydiv stylewidth: 600px;height:400px/divbutton idbtn1触发行为/buttonbutton idbtn2clear/buttonbutton idbtn3setOption/buttonbutton idbtn4dispose/buttonscriptvar mCharts echarts.init(document.querySelector(div))var pieData [{value: 11231,name: 淘宝,},{value: 22673,name: 京东},{value: 6123,name: 唯品会},{value: 8989,name: 1号店},{value: 6700,name: 聚美优品}]var option {legend: {data: [淘宝, 京东, 唯品会, 1号店, 聚美优品]},tooltip: {show: true},series: [{type: pie,data: pieData}]}mCharts.setOption(option)mCharts.on(click, function (arg) {console.log(arg)console.log(click…)}) // 对事件进行监听mCharts.off(click) // 解绑click的事件mCharts.on(legendselectchanged, function (arg) {console.log(arg)console.log(legendselectchanged)})\((#btn1).click(function () {// 模拟用户的行为mCharts.dispatchAction({type: highlight,seriesIndex: 0, // 系列的索引dataIndex: 1 // 数据的索引})mCharts.dispatchAction({type: showTip,seriesIndex: 0,dataIndex: 2})})\)(#btn2).click(function () {// 清空图表的实例mCharts.clear()})\((#btn3).click(function () {// 重新设置optionmCharts.setOption(option)})\)(#btn4).click(function () {// 销毁mChartsmCharts.dispose()})/script /body