echarts |
您所在的位置：网站首页 › echarts地图数据有负数颜色区间划分 › echarts |
echarts
|
需求：
1.每根bar正负坐标倒圆角 2.每根bar颜色渐变 3.三类数据，只有第三类数据会出现负数，其他两类均为正数（A、B、C三类数据，只有C有负数） 如图： 1.样式 this.series = [ { name: 'A', type: 'bar', data: [], itemStyle: { normal: { borderRadius: [15, 15, 0, 0], color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: "#080a45" // 0% 处的颜色 }, { offset: 0.6, color: "#265da8" // 60% 处的颜色 }, { offset: 1, color: "#1cedfa" // 100% 处的颜色 }], false) } }, }, { name: 'B', type: 'bar', data: [], itemStyle: { normal: { barBorderRadius: [15, 15, 0, 0], color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: "#011c36" // 0% 处的颜色 }, { offset: 0.6, color: "#017657" // 60% 处的颜色 }, { offset: 1, color: "#00e8a7" // 100% 处的颜色 }], false) } }, }, { name: 'C', //不可缺少，否则C的legend标题不显示 type: 'bar', data: [], itemStyle: { //不可缺少，否则C的legend颜色块不显示 normal: { // barBorderRadius: [15, 15, 0, 0], color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: "#19134f" // 0% 处的颜色 }, { offset: 0.6, color: "#552eaa" // 60% 处的颜色 }, { offset: 1, color: "#7473d5" // 100% 处的颜色 }], false) } }, }, ];2.A、B正常添加数据即可 let seriesData = [] //用来处理C数据 for (let key in totalData) { this.xData.push(key) this.series[0].data.push(totalData[key].a); //A数据正常添加 this.series[1].data.push(totalData[key].b); //B数据正常添加 // this.series[2].data.push(totalData[key].c); seriesData.push(totalData[key].c) //C数据单独处理一下 }3.C数据单独处理 let obj = {} seriesData.map(item => { obj = { name: 'C', type: 'bar', value: Number(item), // echarts对个别数据记性个性化设置 color: Number(item) > 0 ?(new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: "#19134f" // 0% 处的颜色 }, { offset: 0.6, color: "#552eaa" // 60% 处的颜色 }, { offset: 1, color: "#7473d5" // 100% 处的颜色 }], false)):(new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: "#7473d5" // 0% 处的颜色 }, { offset: 0.6, color: "#552eaa" // 60% 处的颜色 }, { offset: 1, color: "#19134f" // 100% 处的颜色 }], false)), // 给bar设置倒角 barBorderRadius: Number(item) > 0 ? [15, 15, 0, 0] : [0, 0, 15, 15], } } this.series[2].data.push(obj) //添加C数据 })至此，即可实现多类数据时，柱状图实现正负坐标倒圆角 补充其实仔细看，能看到柱子与x轴有重叠部分 如图： 添加一句代码即可：z:4, //x轴显示（柱子与x轴重叠了） xAxis: [ { type: 'category', data: this.xData, z:4, //就是这句，如果是y轴，写在yAxis axisTick: { show: false, }, axisLine: { show: true, //显示x轴 lineStyle: { color: this.datalist[0].color[0], }, }, axisLabel: { interval: 0,//x轴全部显示 show: true, //x轴的值 showMinLabel: true, borderColor: 'rgba(200, 72, 72, 1)', borderType: 'solid', }, }, ], |
【本文地址】
今日新闻 |
推荐新闻 |