echarts柱状图改进度图常用配置

这是改造后的效果:

具体代码：

 init3() {var chartDom = document.getElementById("mountNode3");var myChart = echarts.init(chartDom);const myColor = ["#1089E9", "#1089E9", "#1089E9", "#1089E9", "#1089E9"];var option;option = {grid: {top: "30%",left: "22%",bottom: "10%",},xAxis: {// 不显示x轴相关信息show: false,},yAxis: [{type: "category",// y轴数据反转，与数组的顺序一致inverse: true,// 不显示y轴线和刻度axisLine: {show: false,},axisTick: {show: false,},// 将刻度标签文字设置为白色axisLabel: {color: "#fff",},data: ["食堂", "科研楼", "教学楼", "宿舍楼", "专家楼"],},{// y轴数据反转，与数组的顺序一致inverse: true,show: true,// 不显示y轴线和刻度axisLine: {show: false,},axisTick: {show: false,},// 将刻度标签文字设置为白色axisLabel: {// color: "#fff",show: false,},data: [500, 500, 500, 500, 500],},],series: [{// 第一组柱子（条状）name: "条",type: "bar",// 柱子之间的距离barCategoryGap: 10,// 柱子的宽度barWidth: 10,// 层级 相当于z-indexyAxisIndex: 0,// 柱子更改样式itemStyle: {barBorderRadius: 20,// 每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组color: function (params) {var index = params.dataIndex;var colorList = [// 渐变颜色的色值和透明度// 透明度从0["#01c8ff","#01c8ff","#01c8ff","#01c8ff","#01c8ff","#01c8ff","#01c8ff",],["#1c74d1","#1c74d1","#1c74d1","#1c74d1","#1c74d1","#1c74d1",], // 到透明度1 ,如果需要不同的颜色直接修改不同颜色即可];return {colorStops: [{offset: 0.3, // 颜色的开始位置color: colorList[0][index], // 0% 处的颜色},{offset: 0.6, // 颜色的结束位置color: colorList[1][index], // 100% 处的颜色},],};},},data: [300, 129, 120, 121, 100],// 显示柱子内的百分比文字// label: {//   show: true,//   position: "inside",//   // {c} 会自动解析为数据（data内的数据）//   formatter: "{c}人",// },},{// 第二组柱子（框状 border）name: "框",type: "bar",// 柱子之间的距离barCategoryGap: 10,// 柱子的宽度barWidth: 12,// 层级 相当于z-indexyAxisIndex: 1,// 柱子修改样式itemStyle: {color: "none",borderColor: "#00c1de",borderWidth: 1,barBorderRadius: 15,},data: [500, 500, 500, 500, 500],},],};option && myChart.setOption(option);},

echarts柱状图改进度图常用配置相关推荐

【Echart多场景示例应用】Echarts柱状图、折线图、饼图、雷达图等完整示例。 echarts主标题和副标题的位置、样式等设置（已解决附源码）
**[写在前面]**前端时间做一个echarts的页面调整,临时客户要求加一个参数(总容量)显示,当时我就想用个默认的副标题吧,哪知客户和我说得紧跟在主标题后面,于是乎我就根据设置做了一个调整,我也是 ...
直播app源代码，echarts 柱状图，折线图互转实例
直播app源代码,echarts 柱状图,折线图互转实例的相关代码 function initDayChart(){var myChart = echarts.init(document.getEle ...
echarts实现环形进度图
//环形进度图 TgsChartsUtil.drawCircleLoadingChart = function(cfg){var myChart = TgsChartsUtil.getChart(cf ...
关于echarts柱状图和折线图的样式修改
①去除折线图或饼图的虚线其实这里通过颜色就可以定位到设置. tooltip: {trigger: 'axis',axisPointer: {type: 'cross',crossStyle: {co ...
echarts柱状图饼图折线图
最近大屏项目里做的首先看看效果这几个图我将其标为七个部分下方成为echarts1,echarts2往后类推有需要可以直接拷贝下方代码推荐一个朋友最近发我的echarts图形地址 ...
echarts柱状图、折线图渐变色，填充渐变色，鼠标移入样式，双y轴
基础代码都一样,根据配置的seriesDta的type不同,展现出的效果不同,每一个echarts都对应单独的series 版本不同可能实现效果不同,具体查看官网哦. 安装: npm install ...
echarts使用中过程中的常用配置属性常见问题及绘制地图
echarts使用中的常见的问题 1.给折线图画一条水准线 2.图表自适应容器 3.x轴文字过长显示不全的问题 4.echarts的点击事件 5.数据中如果有空值时如何实现连接空值或者显示断开 6. ...
Echarts 柱状图、折线图和仪表盘的一写属性设置
目录一. 柱状图 1.背景线设置为虚线,lineStyleL里面的type属性为dashed,默认是实线. 2.鼠标放在柱子上的阴影效果,如果用shadow无法设置宽度 3.鼠标放上的tip自定义 ...
echarts 实现环形进度图
效果如图: typescript部分: import {Component, OnInit} from "@angular/core"; import {EchartsDirect ...

echarts柱状图改进度图常用配置

echarts柱状图改进度图常用配置相关推荐

最新文章

热门文章