自己做的网站还要买域名么,沙坪坝集团网站建设,潍坊市城市建设官网站,代做网站的公司平时用图表可能都是常规的折线图#xff0c;柱状图#xff0c;饼图这些基本的。下面的是一个漏斗图 象形柱图写出来的图表。完成后的图表#xff0c;关键是右半边漏斗图很简单#xff0c;只讲下象形柱图里的几个关键点(因为这里的用法有点特别#xff0c;不是文档里的常规…平时用图表可能都是常规的折线图柱状图饼图这些基本的。下面的是一个漏斗图 象形柱图写出来的图表。完成后的图表关键是右半边漏斗图很简单只讲下象形柱图里的几个关键点(因为这里的用法有点特别不是文档里的常规操作)。第一点把图形换成图片symbol属性里前面记得加 image: 不然图片出不来。(文档看清楚一点再下手)第二点上图可以看到我们需要只有一列且纵向排列的图形如果用 symbolRepeat 中的 fixed 指定图形重复那旁边的转化率数字就没法根据 data 写入了。要在 yAxis 中的 type 要改成 category顺便写入 inverse : true(不然的话图形从上到下对应的data是从末尾到开头的顺序)旁边的转换率就可以对应data里的值通过 label 去做了。第三点调整图形在x轴方向的位置。可以在 xAxis 中写入min : 0max : 100通过 data 里的 value 去调整图形在x轴上的相对位置(也可以不写入min 和 max区别就是 data 中 value 的值控制图形 x 轴移动的距离大小)然后通过symbolOffset去微调。第四点调整图形之间的间隔与顶部的距离因为不是 symbolRepeat 出来的重复图形所以没法通过 symbolMargin 属性去调整。那么要如何调整呢在yAxis中通过min 和 max 去调整图形之间的大概间隔。最后通过 symbolOffset 调整图形与顶部的距离。最后直接上代码echarts.init(document.getElementById(photoConversion)).setOption({title: {text: 拍照全流程转化率,top: 26,left: 33,textStyle: {fontFamily: MicrosoftYaHei,color: #252525,fontSize: 16,fontWeight: 400}},color: [#1481E2, #1F88E5, #3594E8, #4CA0EA, #62ABED, #79B8EF, #8FC3F2],xAxis: {show: false,},yAxis: {show: false,type: category,inverse: true,min: 0,max: 6,},series: [{type: funnel,minSize: 90,maxSize: 70%,left: 4%,top: 100,bottom: 50,gap: 2,label: {position: inside,fontFamily: Microsoft YaHei,fontSize: 16,color: #fff,formatter: {b}{xx|}\n{c},rich: {xx: {padding: [6, 0]}}},data: [{ value: 2033, name: 整页拍照 },{ value: 2000, name: 收集错题 },{ value: 1820, name: 确认提交 },{ value: 1680, name: 错题本 },{ value: 800, name: 打印错题 },{ value: 500, name: 预览 },{ value: 100, name: 下载文件 },]}, {type: funnel,minSize: 80,maxSize: 80,top: 100,bottom: 50,left: -68%,gap: 2,label: {position: insideLeft,fontFamily: Microsoft YaHei,fontSize: 14,color: #545454,formatter: function (d) {console.log(d)if (d.data.name 整页拍照) { return }var ins {s|${d.data.name}}\n {x|${d.data.percent}};return ins},rich: {s: {fontSize: 14,color: #545454,padding: [5, 0, 12, 0]},x: {fontSize: 16,color: #545454,fontWeight: bold}}},itemStyle: {color: transparent,borderWidth: 0,},data: [{ value: 2030, name: 整页拍照, percent: 90% },{ value: 2000, name: 收集错题, percent: 70% },{ value: 1820, name: 确认提交, percent: 60% },{ value: 1680, name: 错题本, percent: 50% },{ value: 800, name: 打印错题, percent: 30% },{ value: 500, name: 预览, percent: 20% },{ value: 100, name: 下载文件, percent: 40% },]}, {type: pictorialBar,symbol: image://http://homework.mizholdings.com/kacha/kcsj/8351c72ed86c1a0c/.png,symbolSize: [45%, 58],z: 1,symbolOffset: [110%, 60],label: {show: true,position: right,offset: [15, 60],align: center,backgroundColor: rgba(249,249,249,1),width: 106,height: 60,fontStyle: Microsoft YaHei,formatter: function (d) {var ins {s|转换率}\n {x|${d.data.percent}};return ins},rich: {s: {fontSize: 14,color: #545454,padding: [5, 0, 12, 0]},x: {fontSize: 16,color: #121212}}},data: [{value: 140,percent: 70%,}, {value: 140,percent: 60%,}, {value: 140,percent: 50%,}, {value: 140,percent: 40%,}, {value: 140,percent: 30%,}, {value: 140,percent: 10%,}]}]})可以把 setOption 中的配置复制到 echarts 实例中就可以看到图表了。但是因为容器的宽高有不同所以会有点偏差调整下浏览器的宽高就可以了。(浏览器宽高调整到1380*730差不多就是我图表放到的div宽高了)
