,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}<br />{b1}({a1}): {c1}%'}  //双Y轴的时候

横板柱状图加滚动：

 dataZoom: [{start:0,//默认为0end: 100,//默认为100type: '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,//是否显示数据阴影 默认autoshowDetail: false,//即拖拽时候是否显示详细数值信息 默认truerealtime:true, //是否实时更新filterMode: 'filter',yAxisIndex: [0,1],//控制的y轴startValue: 1, // 初始显示值},//滑块的属性{type:'inside',yAxisIndex:0,start: 0,//默认为1zoomOnMouseWheel: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, // 如果不想间隔线,直接设为falselineStyle: {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);},

echarts，柱状图配置,legend相关推荐

点击echarts柱状图动态改变数据项颜色样式
首先附上参考文章连接:https://blog.csdn.net/weixin_42870683/article/details/103528254添加链接描述今天来实现点击echarts柱状图,动 ...
echarts柱状图上增加icon图标
echarts柱状图上增加icon图标效果图基于echarts5.3.2版本以下是option中的内容 getData(){let datas={ws:{jz:25,sz:30},fq:{jz: ...
前端vue显示柱状图_Vue—Echarts 柱状图
使用Vue做后台管理系统的时候避免不了使用Echarts来展示对应的数据,下面是使用Echarts柱状图来展示对应数据的实例. ee05abaf9633184a9c012631b642d970.png ...
Echarts数据可视化legend图例，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
echarts柱状图改变标签的位置及柱状图颜色
echarts柱状图改变标签的位置(柱状图里面的数值位置)及柱状图颜色在 series里面改变label对象里面的label属性 import * as echarts from 'echarts' ...
实用技巧一文解决 echarts 如何设置 legend 展示为虚线？
文章目录一.echarts配置legend选项为虚线? 二.效果及代码实例三.svg 路径如何查找一.echarts配置legend选项为虚线? 我们可以参考echarts的官方文档,他给出了我 ...
echarts柱状图
echarts柱状图图表实例 option = {xAxis: {name: '横坐标',type: 'category', // 设置为类目轴data: ['Mon', 'Tue', 'Wed', ...
echarts柱状图自定义显示内容
echarts柱状图自定义显示内容基础搭建基础搭建 1.引入js <script src="js/echarts.min.js"></script> 2 ...
echarts柱状图值为0时不显示以及柱状图百分比展示
echarts柱状图值为0时不显示以及柱状图百分比展示 1.效果展示 2.代码 <template><div id="container"><div ...

echarts，柱状图配置,legend

三、echarts Y轴名称显示不全

echarts，柱状图配置,legend相关推荐

最新文章

热门文章