小方格形式的柱状图绘制

代码如下

 let colors = [{one: "#39C9F6",two: "#39C9F6",},{one: "#85F7E7",two: "#85F7E7",},];let echartData = [{name: "已规范法人决策主体",value: 320,},{name: "未规范法人决策主体",value: 380,},// {//   name: "化工",//   value: 3900,// },// {//   name: "运输",//   value: 1800,// },// {//   name: "水电",//   value: 6289,// },// {//   name: "新能源",//   value: 8288,// },// {//   name: "火电",//   value: 3100,// },// {//   name: "煤炭",//   value: 2021,// },];let xAxisData = echartData.map((v) => v.name);let yAxisData = echartData.map((v) => v.value);option = {// backgroundColor:"#000",grid: {// show: true,left: "15%",// top: "20%",right: "8%",bottom: "20%",},xAxis: {type: "category",data: xAxisData,axisLine: {// 轴线show: true,lineStyle: {color: "#268C8C",},},axisLabel: {color: "#268C8C",fontSize: "14",interval: 0,},axisTick: {show: false,},},yAxis: {name: "单位：次",nameTextStyle: {color: "#268C8C",fontSize: 12,padding: [0, 0, 10, -30], //name文字位置 对应 上右下左},type: "value",max: 500,// y轴线axisLine: {show: false,},// 轴文字axisLabel: {color: "#268C8C",fontSize: 12,},// 网格线splitLine: {show: true,lineStyle: {type: "dashed", //dotted：虚线 solid:实线width: 1,color: "#268C8C",},},},series: [{name: "集团各板块资产负债率",type: "bar", //设置类型为象形柱状图barWidth: "100", //柱图宽度itemStyle: {normal: {color: function (params) {let odd = params.dataIndex % 2;return {type: "linear",x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: colors[odd].one, // 0% 处的颜色},{offset: 1,color: colors[odd].two, // 100% 处的颜色},],};},// color:'#39C9F6',label: {show: true,position: "top",formatter: function (params) {//设置柱状图上文本的颜色不同// 索引// console.log(params.dataIndex);if (params.dataIndex % 2 == 0) {return "{a|" + yAxisData[params.dataIndex] + "}";} else {return "{b|" + yAxisData[params.dataIndex] + "}";}},rich: {a: {// color: "#0EFCFF",color: "#fff",},b: {// color: "#6947FF",color: "#fff",},},// color:'#39C9F6'},},},z: 10,zlevel: 0,data: yAxisData,},{type: "pictorialBar", //设置类型为象形柱状图symbol: "rect", //图形类型，带圆角的矩形symbolMargin: "2", //图形垂直间隔symbolRepeat: true, //图形是否重复// 分隔itemStyle: {normal: {color: "#0F375F",},},symbolRepeat: "fixed",symbolClip: true,symbolSize: [100, 2],symbolPosition: "start",symbolOffset: [0, -1],// symbolBoundingData: this.total,width: "100%",z: 0,zlevel: 1,data: yAxisData,},],};

这里说一个问题

这里x轴上的文字没有显示的原因是x轴长度不够

这里看的就比较明显了，第一个文字太长，导致第二个文字隐藏了

解决这个问题的方式有三种；1.强制显示（interval: 0,）

还有文字换行和角度倾斜

放一个别的作者的链接我这个是转载echarts中x轴文字太长换行的几种方式的跳转链接

echarts柱状图小方格的格式（象形柱状图绘制）相关推荐

Vue + ECharts 象形柱状图 pictorialBar
前言:由于公司可视化数字大屏项目需要用到了象形柱状图,所以在博客里记录一下!如果能帮到你,那么点个赞吧,哈哈哈话不多说,直接先上效果图: 创建一个vue组件,我这里由于项目取名为:departmen ...
在线图表分析制作_（漂亮）象形柱状图表制作在线图表制作工具
象形柱状图表属于柱状图的一种,支持一柱一折的方式表达2个数据的变化趋势. 其特色特点在于图形表达能力强,比传统的柱状图更具有视觉效果. 下面上图,效果不错. 目前图表制作工具中,以下图表制作是免费的在 ...
echarts柱状图改变标签的位置及柱状图颜色
echarts柱状图改变标签的位置(柱状图里面的数值位置)及柱状图颜色在 series里面改变label对象里面的label属性 import * as echarts from 'echarts' ...
Python数据可视化 Pyecharts 制作 PictorialBar 象形柱状图
Python3 的 Pyecharts 制作 PictorialBar(象形柱状图) 时需要使用的设置参数和常用模板案例,可根据实际情况对案例中的内容进行调整即可. 文章目录 Demo 基础象型柱图 ...
Echarts柱状图在实体里面展示数据/柱状图顶部展示数据简记
Echarts柱状图在实体里面展示数据/柱状图顶部展示数据简记展示效果如下(主要记录一下如何在柱状体实体里面展示自定义的数据和在顶部展示自定义数据) 柱状图实体展示数据 series: [{ na ...
ECharts官方文档及常用组件柱状图联动
ECharts官方文档及常用组件柱状图联动导入js包 <!DOCTYPE html> <html><head><meta charset="ut ...
电脑上计算机中的文档怎么变成格子样,电脑有的软件文字显示小方格是怎么回事？怎样解决？...
2009-07-02 回答你好啊.你说就是有的软件方格..其他的桌面什么的不方格是吗??那样的话问题比一般的方格复杂点.. 下面是给你找的资料.. 希望你能解决哦. 汉字乱码现象大致可分成四类:网页 ...
uniapp+Echarts微信小程序实现中国地图
uniapp+Echarts微信小程序实现中国地图在uni-app项目引用Echarts 使用Echarts 地图实现: 最终效果 **项目源码**地址:[https://github.com/wa ...
python对比柱状图_Python 数据分析测试5 之柱状图对比显示
# Time: 2020/07/28 #Author: Xiaohong # 运行环境: OS: Windows 10 # Python: 3.7 # 功能: 导入4份文件(分别对应4个部位), 以 ...

echarts柱状图小方格的格式（象形柱状图绘制）

小方格形式的柱状图绘制

代码如下

这里说一个问题

这里x轴上的文字没有显示的原因是x轴长度不够

这里看的就比较明显了，第一个文字太长，导致第二个文字隐藏了

解决这个问题的方式有三种；1.强制显示（interval: 0,）

还有文字换行和角度倾斜

echarts柱状图小方格的格式（象形柱状图绘制）相关推荐

最新文章

热门文章

echarts柱状图 小方格的格式 （象形柱状图绘制）

小方格形式的柱状图绘制

代码如下

这里说一个问题

这里x轴上的文字没有显示的原因是x轴长度不够

这里看的就比较明显了，第一个文字太长，导致第二个文字隐藏了

解决这个问题的方式有三种；1.强制显示 （interval: 0,）

还有文字换行 和 角度倾斜

echarts柱状图 小方格的格式 （象形柱状图绘制）相关推荐

最新文章

热门文章

echarts柱状图小方格的格式（象形柱状图绘制）

解决这个问题的方式有三种；1.强制显示（interval: 0,）

还有文字换行和角度倾斜

echarts柱状图小方格的格式（象形柱状图绘制）相关推荐