echarts，柱状图配置,legend
,echarts使用：
一、鼠标悬停时不显示文字设置：
option = {
tooltip: {
show:false,
},
二、鼠标悬停时扇形不高亮：
series: [{hoverAnimation: false,}]
图表的上下左右距离：
选中显示单位：
三、echarts Y轴名称显示不全
1.调整grid下的left属性，说白了就是调整y轴与左侧的距离，大了就能显示更多的文字
grid:{
top:48,
left:400,// 调整这个属性
right:50,
bottom:50,
}
2.通过设置axisLabel下的formatter属性，实现自定义处理文字，将多出来的用省略号替代
yAxis:{
axisLabel:{
show:true,
formatter:function(value){
var texts=value;
if(texts.length>15){ // 具体多少字就看自己了
texts=texts.substr(0,15)+'...';
}
return texts;
}四、图例设置
legend:{
//纵向
orient: 'vertical',
top: '00%',
left: '60%',
//图例距离饼图的距离
itemGap: 20,
itemWidth: 14,// 设置图例图形的宽
itemHeight: 14,
textStyle:{
color:'#fff',
fontSize:'14',
rich: {
a: {
width: 50，
align: 'middle' //文字居中显示
},
b: {
width: 30,
color:'#03C8D7'，
align: 'middle'
},
c:{
color:'#03C8D7'
}
}
},
formatter: function(name) {
var data = option.series[0].data;
var total = 0;
var tarValue;
for (var i = 0; i < data.length; i++) {
total += Number(data[i].value);
if (data[i].name == name) {
tarValue = data[i].value;
}
}
var v = tarValue;
var p = Math.round(((v / total) * 100));
return `{a|${name}} 占比\n {b|${v}人} {c|${p}%}`;
},legend: {
show: true, //是否显示
type: "plain", // 图例的类型 'plain':普通图例 'scroll':可滚动翻页的图例
zlevel: 1, // 所有图形的 zlevel 值。
icon: "circle",
top: "5%", // bottom:"20%" // 组件离容器的距离
right: "5%", //left:"10%" // // 组件离容器的距离
width: "auto", // 图例组件的宽度
height: "auto", // 图例组件的高度
orient: "horizontal", // 图例列表的布局朝向。 'horizontal' 'vertical'
align: "auto", // 图例标记和文本的对齐
padding: 5, // 图例内边距
itemWidth: 6, // 图例标记的图形宽度。
itemGap: 20, // 图例每项之间的间隔。
itemHeight: 14, // 图例标记的图形高度。
symbolKeepAspect: true, // 如果图标（可能来自系列的 symbol 或用户自定义的 legend.data.icon）是 path:// 的形式，是否在缩放时保持该图形的长宽比。
图例百分比显示设置，同一图例各项的间隔以及图例颜色大小：
// 使用回调函数
formatter: function(name) {
var data = option.series[0].data;
var total = 0;
var tarValue;
for (var i = 0; i < data.length; i++) {
total += Number(data[i].value);
if (data[i].name == name) {
tarValue = data[i].value;
}
}
var v = tarValue;
var p = Math.round(((v / total) * 100));
return `${name} ${p}%`;
},
rich: { //图例各项的间隔以及图例颜色大小
a: {
color: "red",
lineHeight: 10,
},
b: {
color: "#fff",
lineHeight: 10,
},
}, // 自定富文本样式 selectedMode: true, // 图例选择的模式，
inactiveColor: "#ccc", // 图例关闭时的颜色。
textStyle: {
color: "#556677", // 文字的颜色。
fontStyle: "normal", // 文字字体的风格。
fontWeight: "normal", // 文字字体的粗细。 'normal' 'bold' 'bolder' 'lighter' 100 | 200 | 300 | 400...
fontFamily: "sans-serif", // 文字的字体系列。
fontSize: 12, // 文字的字体大小。
lineHeight: 20, // 行高。
backgroundColor: "transparent", // 文字块背景色。
borderColor: "transparent", // 文字块边框颜色。
borderWidth: 0, // 文字块边框宽度。
borderRadius: 0, // 文字块的圆角。
padding: 0, // 文字块的内边距
shadowColor: "transparent", // 文字块的背景阴影颜色
shadowBlur: 0, // 文字块的背景阴影长度。
shadowOffsetX: 0, // 文字块的背景阴影 X 偏移。
shadowOffsetY: 0, // 文字块的背景阴影 Y 偏移。
// width: 50, // 文字块的宽度。 默认
// height: 40, // 文字块的高度 默认
textBorderColor: "transparent", // 文字本身的描边颜色。
textBorderWidth: 0, // 文字本身的描边宽度。
textShadowColor: "transparent", // 文字本身的阴影颜色。
textShadowBlur: 0, // 文字本身的阴影长度。
textShadowOffsetX: 0, // 文字本身的阴影 X 偏移。
textShadowOffsetY: 0, // 文字本身的阴影 Y 偏移。
},
}
图例的内容：显示百分比：
formatter: function(name) {
var data = option.series[0].data;
var total = 0;
var tarValue;
for (var i = 0; i < data.length; i++) {
total += data[i].value;
if (data[i].name == name) {
tarValue = data[i].value;
}
}
var v = tarValue;
var p = Math.round(((tarValue / total) * 100));
return `${name} ${v}人(${p}%)`;
},柱状图与坐标轴直接有距离：使用stack: 在series里再添加一个{}，颜色设置为透明：
series: [
{
data: [5, 5, 5, 5, 5, 5],
type: 'bar',
barWidth: 14,
stack: '1',
itemStyle: {
barBorderRadius: [20,20,20,20],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(178, 189, 255,0)' },
// { offset: 0.5, color: '#188df0' },
{ offset: 1, color: 'rgba(82, 106, 255,0)' }
])
},
},
{
data: [60, 90, 50, 80],
type: 'bar',
barWidth: 14,
stack: '1',
itemStyle: {
barBorderRadius: [20,20,20,20],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(178, 189, 255,0.8)' },
// { offset: 0.5, color: '#188df0' },
{ offset: 1, color: 'rgba(82, 106, 255,0.8)' }
])
},
}
]
};图形向上移动一定的距离：
symbolOffset
例如 [0, '-50%'] 就是把图形向上移动了自身尺寸的一半的位置
柱状图的柱子使用图片：
首先根据图片所在路径引入图片：import bar_bg from "@/assets/images/economics/bar_bg.png";
在echarts使用图片：
柱形图折线图多条Y轴；
首先 series中的yAxisIndex他的值（从零开始）等于几，这个数据对应的y轴就是yAxis对应的第几条y轴。y轴线的设置：
yAxis: [
{
show:true,
type: 'value',
name:'亿元',
splitLine: {
//隐藏网格线
show: true,
lineStyle: {
color: 'rgba(119, 119, 119, 1)', //网格线的颜色
width: 0.5,
type: 'dotted'
}
},
axisLine:{
show:true,
lineStyle:{
color:"rgba(96,253,248,0.6)"
}
}
},
{
show:true,
type: 'value',
name:'%',
min: 0,
max: 100,
interval: 25,
splitNumber: 6, //设置坐标轴的分割段数
splitLine: {
//隐藏网格线
show: true,
lineStyle: {
color: 'rgba(119, 119, 119, 1)', //网格线的颜色
width: 0.5,
type: 'dotted'
}
},
axisLine:{
show:true,
lineStyle:{
color:"rgba(96,253,248,0.6)"
}
}
},],鼠标移入显示数据设置：
tooltip: {
trigger: 'axis',
backgroundColor: "rgba(0,0,0,0.4)",
borderColor: "transparent",
textStyle: {
fontSize: 14,
color: "#fff"
},
formatter: '{b0}({a0}): {c0}
{b1}({a1}): {c1}%'
} //双Y轴的时候横板柱状图加滚动：
dataZoom: [
{
start:0,//默认为0
end: 100,//默认为100
type: 'slider',
maxValueSpan:9,//显示数据的条数(默认显示10个)
show: true,
yAxisIndex: [0],
handleSize: 0,//滑动条的 左右2个滑动条的大小
height: '70%',//组件高度
left: 7000, //左边的距离
right: 8,//右边的距离
top: 0,//上边边的距离
borderColor: "rgba(43,48,67,0.8)",
fillerColor: '#33384b',//滑动块的颜色
backgroundColor: 'rgba(13,33,117,0.5)',//两边未选中的滑动条区域的颜色
showDataShadow: false,//是否显示数据阴影 默认auto
showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
realtime:true, //是否实时更新
filterMode: 'filter',
yAxisIndex: [0,1],//控制的y轴
startValue: 1, // 初始显示值
},
//滑块的属性
{
type:'inside',
yAxisIndex:0,
start: 0,//默认为1
zoomOnMouseWheel:false, //滚轮是否触发缩放
moveOnMouseMove:true, //鼠标滚轮触发滚动
moveOnMouseWheel:true
},
],十、饼图中间加文字、饼图以百分比形式显示（100-value）
graphic:{ //图形中间文字
type:"text",
left:"center",
top:"center",
style:{
text:` ${this.secondValue}% `,
textAlign:"center",
fill:"#fff",
fontSize:14
}
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['50%', '75%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
// emphasis: { //中间显示文字时，这里必须删除
// label: {
// show: true,
// fontSize: '40',
// fontWeight: 'bold'
// }
// },
labelLine: {
show: false
},
data: [
{
value:this.secondValue,
label: {
show: true,
},
itemStyle: {
color: "rgba(34, 144, 192, 0.6)",
}
},
{
value: 100 - this.secondValue,
name: "",
itemStyle: {
color: "rgba(255, 255, 255, 0.2)",
},
},
],
}
]十一、柱状图顶部加文字
series: [
{
data: this.inoculationRateList,
type: 'bar',
// barWidth : 20,
showBackground: true,
label:{
formatter:"{c}"+"%",
show:true,
position: [130, 3],
color:'#fff'
},
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}
],十二、 有关Y轴yAxis属性
1.不想要负Y轴，可以直接设置 min:0;
2.想要Y轴都是整数,设置坐标轴最小间隔大小 minInterval: 1 ,注意:只在数值轴或时间轴中（type: ‘value’ 或 ‘time’）有效。你弄个别的,这个设置未必有效了
3.Y轴想展示间隔(一条条横着的间隔线),添加splitLine属性
splitLine: {
show: true, // 如果不想间隔线,直接设为false
lineStyle: {
type: 'dashed', //间隔的类型,'solid''dashed''dotted'三个属性
color: '#e1e5f0', // 线的颜色
}
},
4.设置Y轴分割线个数, splitNumber =5,设置5个分割线
5.如何设置双Y轴,就是以前是一个对象,现在多加一个对象
yAxis: [
{
type: 'value',
name: '万元'
},
{
type: 'value',
name: 'Mwh'
}]6.柱状图反转坐标轴
yAxis : [
2 {
3
24 inverse: true //反转坐标轴
25 }
26 ]
12、 echarts堆叠柱状图并且显示总数
柱状图堆叠的代码为：
显示总数的代码为。总计，data6.
var data1 = [1,1,1,1,1,1]
var data2 = [1,1,1,1,1,1]
var data3 = [1,1,1,1,1,1]
var data6 = function() {
var datas = [];
for (var i = 0; i < data1.length; i++) {
datas.push(data1[i] + data2[i] + data3[i] );
}
return datas;
}();
series: [
{
// data: this.taxiSeries,
data:[1,1,1,1,1,1],
type: 'bar',
stack: 'total',
name:'出租车',
// showBackground: true,
//这个label是每一个柱状图的数据
// label:{
// show:false,
// formatter:"{c}" ,
// position:[0,10],
// color:'#fff'
// },
itemStyle:{
color:'#0463c1',
// barBorderRadius:[18,18,18,18]
},
// backgroundStyle: {
// color: 'rgba(180, 180, 180, 0.2)'
// }
},
{
// data: this.privateCarSeries,
data:[1,1,1,1,1,1],
type: 'bar',
name:'私家车',
stack: 'total',
// showBackground: true,
label:{
show:false,
// formatter:"{c}" ,
// position:[0,10],
color:'#fff'
},
itemStyle:{
color:'#bec104',
},
},
{
// data: this.otherCarSeries,
data:[1,1,1,1,1,1],
type: 'bar',
name:'其他车',
stack: 'total',
// showBackground: true,
label:{
show:false,
formatter:"{c}" ,
// position:[0,10],
color:'#fff'
},
itemStyle:{
color:'#2efcb7',
// barBorderRadius:[18,18,18,18]
},
// backgroundStyle: {
// color: 'rgba(180, 180, 180, 0.2)'
// }
},
{
name: '总计',
type: 'line',
lineStyle:{
opacity : 0,
},
label:{
show: true,
textStyle:{
color:'#fff'
}
},
data: data6
}
], carsEcharts(){
var chartDom = document.getElementById('carsEcharts');
var myChart = echarts.init(chartDom);
var option;
//data123的数据可以是后端返回的数组数据
var data1 = [1,1,1,1,1,1]
var data2 = [1,1,1,1,1,1]
var data3 = [1,1,1,1,1,1]
var data6 = function() {
var datas = [];
for (var i = 0; i < data1.length; i++) {
datas.push(data1[i] + data2[i] + data3[i] );
}
return datas;
}();
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
show:true,
data:['出租车','私家车','其他车'],
itemGap: 10, // 图例之间的间隔
itemWidth: 10, // 图例的长宽
itemHeight: 10,
x:'right',
padding:[30,20,40,0],
textStyle:{
color:'#fff'
}
},
grid: {
left: "13%",
right: "13%",
top: "30%",
bottom: "8%",
},
xAxis: {
type: 'category',
data: this.dataXaxis,
axisLine:{
show:true
},
axisLabel:{
show:true,
textStyle:{
color:'#fff'
}
},
// splitLine:{
// show:false
// }
},
yAxis: {
type: 'value',
// data: this.streetDetectionRate,
minInterval:1,
axisLine:{
show:false
},
axisLabel:{ color:'#fff'},
axisTick:{
show:false
},
splitLine:{
show:true,
lineStyle:{
color:'rgba(8,8,8,.2)'
}
}
},
series: [
{
// data: this.taxiSeries,
data:[1,1,1,1,1,1],
type: 'bar',
stack: 'total',
name:'出租车',
// showBackground: true,
// label:{
// show:false,
// formatter:"{c}" ,
// position:[0,10],
// color:'#fff'
// },
itemStyle:{
color:'#0463c1',
// barBorderRadius:[18,18,18,18]
},
// backgroundStyle: {
// color: 'rgba(180, 180, 180, 0.2)'
// }
},
{
// data: this.privateCarSeries,
data:[1,1,1,1,1,1],
type: 'bar',
name:'私家车',
stack: 'total',
// showBackground: true,
label:{
show:false,
// formatter:"{c}" ,
// position:[0,10],
color:'#fff'
},
itemStyle:{
color:'#bec104',
// barBorderRadius:[18,18,18,18]
},
// backgroundStyle: {
// color: 'rgba(180, 180, 180, 0.2)'
// }
},
{
// data: this.otherCarSeries,
data:[1,1,1,1,1,1],
type: 'bar',
name:'其他车',
stack: 'total',
// showBackground: true,
label:{
show:false,
formatter:"{c}" ,
// position:[0,10],
color:'#fff'
},
itemStyle:{
color:'#2efcb7',
// barBorderRadius:[18,18,18,18]
},
// backgroundStyle: {
// color: 'rgba(180, 180, 180, 0.2)'
// }
},
{
name: '总计',
type: 'line',
lineStyle:{
opacity : 0,
},
label:{
show: true,
textStyle:{
color:'#fff'
}
},
data: data6
}
],
};
option && myChart.setOption(option);
},