不再更新的网站,江苏发布最新消息,济南浩辰网站建设公司怎么样,合肥城乡建设网站目录 柱状图(bar)需求[1] 复制案例[2] 修改类目轴方向[3] 修改数据渲染方向[4] 修改坐标轴文本样式 漏斗图(funnel)漏斗图的形状 柱状图(bar)
需求 如上图#xff0c;做一个横向柱状图#xff0c;后端返回的数据是从小向大排列的数据#xff0c;希望能够按照顺序进行展示。… 目录 柱状图(bar)需求[1] 复制案例[2] 修改类目轴方向[3] 修改数据渲染方向[4] 修改坐标轴文本样式 漏斗图(funnel)漏斗图的形状 柱状图(bar)
需求 如上图做一个横向柱状图后端返回的数据是从小向大排列的数据希望能够按照顺序进行展示。
[1] 复制案例
复制一个Echarts官网案例将数据替换为想要渲染的数据
[2] 修改类目轴方向 [2] 将[1]图柱状图改为横向柱状图 xAxis与yAxis是直角坐标轴x/y轴的配置项 在xAxis与yAxis配置项中都存在type属性属性值有4个分别如下 category 类目轴 x轴默认值value 数值轴 y轴默认值time 时间轴log 对数轴 data属性是类目数据若是(xAxis/yAxis)没有设置type属性但是设置了axis.data则认为当前配置项的type为category。 示例
[3] 修改数据渲染方向 从上图可以看出数据渲染方向是沿着y轴往上进行渲染但是违背我的初衷我希望用户能够看到数据的正想排列过程。 xAxis/yAXis配置项中存在inverse属性 - 是否是反向坐标轴(数据是否反向渲染) 配置inverse属性为true就达到目的了。
[4] 修改坐标轴文本样式 axis.data是一个数组存储类目数据。 数组的每个元素String/Object 若是不需要修改文本样式则元素为String格式若是需要修改文本样式则元素为Object格式 如上图仅需要修改‘衬衫’的字体那么data中第一个元素为Object类型其余元素类型为String类型。
在本案例中需要将y轴坐标文本全部调整字体为16px因此可以进行如下调整
const value [衬衫, 羊毛衫, 雪纺衫, 裤子, 高跟鞋, 袜子]
const data value.map(item({value: item,textStyle:{fontSize:16,}
}))
option {yAxis: {data,inverse:true},xAxis:{},series: [{data: [200, 180, 120, 80, 30, 10],type: bar}]
}漏斗图(funnel)
option {series: [{type: funnel, // 图表类型left: 10%,top: 60,bottom: 60,width: 80%,min: 0, // value最小值max: 100, // value最大值minSize: 0%, // 最小值映射的宽度最小宽度maxSize: 100%, // 最大值映射块的宽度最大宽度// sort: 数据排列顺序 descending默认从大到小排列ascending从小到大排列none:按照data(value属性)值排列sort: descending, // gap: 图表块与块之间的间距gap: 2,// label: 图表每块上的文本label: {show: true, // 是否显示文本默认trueposition: inside, // 文本显示的位置默认块右侧formatter: function(d){ // 文本内容默认name属性return d.data.name d.data.num}},// 图表每个块的样式itemStyle: {// color:red, 表示每个块都是红色默认是在option.color中选取颜色borderColor: #fff,borderWidth: 1},// 鼠标hover时块的样式emphasis: {// 文本样式label: {fontSize: 20}},// 显示数据data: [{ value: 60, name: Visit, num: 5000 },{ value: 40, name: Inquiry, num: 3200 },{ value: 20, name: Order, num: 10 },{ value: 80, name: Click , num: 6800},{ value: 100, name: Show, num: 10000 }]}]
};漏斗图的形状
在看案例时发现图表是一个“三角形”的形状但是在我们实际使用时会发现图表存在变形的情况 漏斗图的形状是通过data.value属性控制的若是每个数据的data.value属性的递减/递增不是成比例的就会出线漏斗图三角形变形的情况。 若是想要图形一直是三角形可以将value值做成递减在data中添加另一个属性来表示真正的数值注若是后端的返回值不是按照顺序返回的需要先排序
