最新消息: USBMI致力于为网友们分享Windows、安卓、IOS等主流手机系统相关的资讯以及评测、同时提供相关教程、应用、软件下载等服务。

echarts柱状图改变标签的位置及柱状图颜色

IT圈 admin 0浏览 0评论

echarts柱状图改变标签的位置及柱状图颜色

echarts柱状图改变标签的位置(柱状图里面的数值位置)及柱状图颜色
在 series里面改变label对象里面的label属性

import * as echarts from 'echarts';var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;option = {tooltip: {trigger: 'axis',axisPointer: {// Use axis to trigger tooltiptype: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'}},legend: {},color:['#39c5bb','#ffb13b'],//颜色更改grid: {left: '3%',right: '4%',height: ‘auto’,containLabel: true},xAxis: {// type: 'value'},yAxis: {nameTextStyle: {align: 'center',verticalAlign: 'middle'},type: 'category'},series: [{name: 'Video Ad',type: 'bar',stack: 'total',label: {show: true,//是否显示标签 true为显示position: ['50%', '50%']//第一个是横向距离百分比,第二个是竖向百分比},emphasis: {focus: 'series'},data: [150]},{name: 'Search Engine',type: 'bar',stack: 'total',label: {show: true},emphasis: {focus: 'series'},data: [820]}]
};
option && myChart.setOption(option);

示例图片[此时是 position: [‘50%’, ‘50%’]的情况下]

此时是 position: [‘20%’, ‘80%’]的情况下]

颜色更改
在option对象里面修改color 如color:[‘#39c5bb’,‘#ffb13b’],

更多position的更改的属性
.html#series-line.label.show

echarts柱状图改变标签的位置及柱状图颜色

echarts柱状图改变标签的位置(柱状图里面的数值位置)及柱状图颜色
在 series里面改变label对象里面的label属性

import * as echarts from 'echarts';var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;option = {tooltip: {trigger: 'axis',axisPointer: {// Use axis to trigger tooltiptype: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'}},legend: {},color:['#39c5bb','#ffb13b'],//颜色更改grid: {left: '3%',right: '4%',height: ‘auto’,containLabel: true},xAxis: {// type: 'value'},yAxis: {nameTextStyle: {align: 'center',verticalAlign: 'middle'},type: 'category'},series: [{name: 'Video Ad',type: 'bar',stack: 'total',label: {show: true,//是否显示标签 true为显示position: ['50%', '50%']//第一个是横向距离百分比,第二个是竖向百分比},emphasis: {focus: 'series'},data: [150]},{name: 'Search Engine',type: 'bar',stack: 'total',label: {show: true},emphasis: {focus: 'series'},data: [820]}]
};
option && myChart.setOption(option);

示例图片[此时是 position: [‘50%’, ‘50%’]的情况下]

此时是 position: [‘20%’, ‘80%’]的情况下]

颜色更改
在option对象里面修改color 如color:[‘#39c5bb’,‘#ffb13b’],

更多position的更改的属性
.html#series-line.label.show

发布评论

评论列表 (0)

  1. 暂无评论