echarts柱状图两组数据 您所在的位置:网站首页 柱形图两组数据 echarts柱状图两组数据

echarts柱状图两组数据

#echarts柱状图两组数据| 来源: 网络整理| 查看: 265

//同比环比

var myChart= echarts.init(document.getElementById('bar_chart'));

var xAxisData = ['全部','轿车','SUV','MPV'];

var data1 = [1.03,0.44,0.88,0.67]; //同比

var data2 = [-0.4,-0.56,-0.67,-0.53];//环比

option = {

legend: {

itemWidth:15,

itemHeight:4,

fontSize:12,

data: ['同比', '环比'],

right: 55,

top:10,

orient: 'vertical',

},

tooltip: {},

// 设置图标距离上下左右的距离

grid: {

top: 75,

left:10,

right:50,

},

xAxis: {

type: 'category',

//x轴文字配置

axisLabel: {

show: true,

inside:false,

// align:'left',

margin:20,

textStyle: {

color: '#1a1a1a',

fontSize: '14'

}

},

axisTick: {

show: false

}, //去掉x轴刻度线

data:[],

axisLine: {

show: true,

length:2,

lineStyle:{

color:"#B5B2B5"

},

}

},

yAxis: {

//y轴不显示

show:false,

inverse: false,//是否反向坐标

axisLine: {

show: false,

},

// y轴刻度不显示

axisLabel : {

formatter: function(){

return "";

}

},

splitLine:{

show:false

},

splitArea: {show: false}

},

series: [

{

name: '同比',

type: 'bar',

barGap: '-100%',

barWidth: '15%',

stack: 'one',

data: [],

itemStyle: {

normal: {

label: {

show: true, //开启显示

position: 'top', //在上方显示

formatter: '{c}%',//每一项加%

textStyle: { //数值样式

color: '#1a1a1a',

fontSize: 12

}

},

barBorderRadius: 100,

color: new echarts.graphic.LinearGradient(

0, 1, 0, 0,

[{

offset: 0,

color: '#f89741'

},

{

offset: 1,

color: '#fa6206'

}

]

)

}

},

}, {

name: '环比',

type: 'bar',

barWidth: '15%',

stack: 'one',

data: [],

itemStyle: {

normal: {

label: {

show: true, //开启显示

position: 'bottom', //在上方显

formatter: '{c}%',//每一项加%

textStyle: { //数值样式

color: '#1a1a1a',

fontSize: 12

}

},

barBorderRadius: 100,

color: new echarts.graphic.LinearGradient(

0, 1, 0, 0,

[{

offset: 0,

color: '#0c7be3'

},

{

offset: 1,

color: '#42d3f7'

}

]

)

}

},

},

]

};

myChart.setOption(option);



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有