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

做站长工具网站百度seo怎么提高排名

做站长工具网站,百度seo怎么提高排名,东莞厚街万达广场,做二手车广告推广哪家网站好柱状图扩展 一、前言二、思路1、新增面①、在drawShape方法中,新增一个实际左侧面,②、 在drawShape方法中,新增一个实际右侧面,③ 绘制 2、新增series对象① 添加实际值的左侧面和右侧面 三、效果图 一、前言 事情是这样子的&am…

柱状图扩展

  • 一、前言
  • 二、思路
    • 1、新增面
      • ①、在drawShape方法中,新增一个实际左侧面,
      • ②、 在drawShape方法中,新增一个实际右侧面,
      • ③ 绘制
    • 2、新增series对象
      • ① 添加实际值的左侧面和右侧面
  • 三、效果图

一、前言

事情是这样子的,收到一个粉丝的评论,说想做一个这样的立体柱状图,我没有写过,但是我大概知道了一个思路,然后给粉丝回复以后就开始尝试了,
在这里插入图片描述

二、思路

这图我的想法是在原本的柱状图上在加两个面,关于如何绘制柱状图的,请看我的另一篇文章,链接如下:03-echarts如何画立体柱状图
说干就干,

1、新增面

①、在drawShape方法中,新增一个实际左侧面,

  const trueLeft = echarts.graphic.extendShape({buildPath (ctx, shape) {const { topBasicsYAxis, bottomYAxis, basicsXAxis } = shape;// 侧面宽度const WIDTH = 15;// 斜角高度const OBLIQUE_ANGLE_HEIGHT = 3.6;const p1 = [basicsXAxis - WIDTH, topBasicsYAxis - OBLIQUE_ANGLE_HEIGHT];const p2 = [basicsXAxis - WIDTH, bottomYAxis];const p3 = [basicsXAxis, bottomYAxis];const p4 = [basicsXAxis, topBasicsYAxis- OBLIQUE_ANGLE_HEIGHT];ctx.moveTo(p1[0], p1[1]);ctx.lineTo(p2[0], p2[1]);ctx.lineTo(p3[0], p3[1]);ctx.lineTo(p4[0], p4[1]);console.log('ctx---',ctx)},});

关于P1,P2,P3,P4的位置在我的柱状图文章中也有仔细描述,就不细讲了,根据效果图可以知道,P1和P4的位置是水平的,所以Y轴是一致的,将原先的leftShape变量复制过来,更改一下P4的y轴定义,

②、 在drawShape方法中,新增一个实际右侧面,

 const trueRight = echarts.graphic.extendShape({buildPath (ctx, shape) {const { topBasicsYAxis, bottomYAxis, basicsXAxis } = shape;// 侧面宽度const WIDTH = 15;// 斜角高度const OBLIQUE_ANGLE_HEIGHT = 3.6;const p1 = [basicsXAxis, topBasicsYAxis - OBLIQUE_ANGLE_HEIGHT];const p2 = [basicsXAxis, bottomYAxis];const p3 = [basicsXAxis + WIDTH, bottomYAxis];const p4 = [basicsXAxis + WIDTH, topBasicsYAxis - OBLIQUE_ANGLE_HEIGHT];ctx.moveTo(p1[0], p1[1]);ctx.lineTo(p2[0], p2[1]);ctx.lineTo(p3[0], p3[1]);ctx.lineTo(p4[0], p4[1]);},});

由效果图可知,P1和P4的y轴依旧是一致的,所以将rightShape变量复制过来,更改P1的y轴定义,

③ 绘制

      echarts.graphic.registerShape("trueLeft", trueLeft);echarts.graphic.registerShape("trueRight", trueRight);

2、新增series对象

① 添加实际值的左侧面和右侧面

series的新对象中只有实际的两个面,所以可以直接将series的第一个对象复制过来,然后在return中的children中只留下两个对象,然后更改type名字分别为trueLeft和trueRight,我更改了一下柱子的颜色,具体情况可以根据自己所需的颜色来更改

 {type: "custom",data: [50],barWidth: 30,renderItem (params, api) {// 基础坐标const basicsCoord = api.coord([api.value(0), api.value(1)]);// 顶部基础 y 轴const topBasicsYAxis = basicsCoord[1];// 基础 x 轴const basicsXAxis = basicsCoord[0];// 底部 y 轴const bottomYAxis = api.coord([api.value(0), 0])[1];return {type: "group",children: [{type: "trueLeft",shape: {topBasicsYAxis,basicsXAxis,bottomYAxis,},style: {fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgb(0, 192, 238,0.8)',},{offset: 0.8,color: 'rgb(0, 194, 239,0.2)',},{offset: 1,color: 'rgb(0, 194, 239,0)',},]),emphasis: {fill: 'yellow', // 鼠标高亮时的填充颜色},},},{type: "trueRight",shape: {topBasicsYAxis,basicsXAxis,bottomYAxis,},style: {fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#00CCF5 ',},{offset: 0.8,color: 'rgb(4, 88, 115,0.8)',},{offset: 1,color: 'rgb(4, 88, 115,0.6)',},]),emphasis: {fill: 'yellow', // 鼠标高亮时的填充颜色},},},],};}},

三、效果图

具体的颜色什么的自己可以调整,每个children对象里面的style就是用来调整
在这里插入图片描述

http://www.hrbkazy.com/news/24050.html

相关文章:

  • 1做网站苹果cms永久免费建站程序
  • 园区二学一做网站免费seo在线优化
  • 有没有外包活的网站佛山百度快照优化排名
  • 最好看免费观看高清大全大江大河seo营销的概念
  • 济宁做网站的企业新闻摘抄四年级下册
  • 大连哪家做网站比较好新公司做网站多少钱
  • 网站改版收费广州seo公司品牌
  • 广州手机网站建设费用人力资源和社会保障部
  • 沧州省建设厅网站一站式海外推广平台
  • 展示网站开发 大概多少钱seo网络推广到底是做什么的
  • 文学网站怎样建设百度不收录网站
  • 手机网站建设系统资源网站优化排名软件
  • 宁波做外贸网站推广免费网站搭建
  • 网站实名制 怎么做google关键词工具
  • php网站开发文档怎么写可以发外链的网站整理
  • 做网站的职位叫什么问题网络营销策略实施的步骤
  • 百度搜不到的网站河南网站建设制作
  • 公司网站彩页怎么做网站快速被百度收录
  • 本科自考有什么专业站长之家seo查询
  • 网站建设开发原代码归属武汉seo报价
  • 永康网站建设公司百度上如何做优化网站
  • 重庆做网站建设公司排名项目推广方式有哪些
  • wordpress无广告视频网站淘宝推广引流方法有哪些
  • 宝山企业做网站怎样推广自己的产品
  • 网站图片一般多大尺寸seo优化与sem推广有什么关系
  • 建站平台 iis如何建立网址
  • 做外贸仿牌网站云南百度公司
  • 没有自己的境外网站怎么做谷歌推广百度竞价推广运营
  • 聊城网站开发公司教育机构在线咨询
  • 腾讯网静态网站建设站内推广方式有哪些