针对之前写的博文,我再做进一步的更新。如果需要基础版本,点击 关于echart的简单理解
这几天的工作都是跟echart打交道。可以说对echart有一些简单的基本认识了。不多说,来点干货吧。
1、如果数据差距很大的话,会出来一种现像。那就是数据小的柱子很小很小,而数据大的,就会出现很大很大。这样看起来很不美观。就如下图这样子
不用说,你们也会说这样很难看了。那么,有没有更好的办法呢?其实,我们只需要改一下它的配置就可以了。
对,就是那么简单,只需要把这个值改下就可以了。
yAxis: [
{
type: 'log',
min:10,
// min 是最小的值
//max:20,
// max 是最大的值
splitNumber:10,
// splitNumber 可以理解为中间多少个标签
min:'dataMin', //取最小值为最小刻度 (这个属值是固定写法)
max: 'dataMax', //取最大值为最大刻度(这个属值是固定写法)
},
],
而这代码的意思是把值转换成数学中的对数来统计。对数是啥?其实,我也不知道,没上过高中,不知道是啥子。
然而,修改这个配置也是需要一定的基础的。那就是,数据中不能有零存在。那么,如果有零,我们只能把零从重赋值为undefined就可以了。不然,会出现所有的柱都“一气冲天”全都顶到天上去了。
2、那么,问题来了,如果有些时候,需要自定义一些配置。其实,这些属性都是通用的。
legend: {//这个是图例
show: true,
right: '3%',
orient: "vertical",//默认是横排,vertical是竖向排列的意思,如果想模向排列,这个属性可以不用设置
icon: "circle",
itemWidth: 8, // 设置宽度
itemHeight: 8, // 设置高度
},
tooltip: {//定义鼠标点击柱子时显示的小框框
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
triggerOn: "click",//这个是点击的意思,也可以是其他的,比如说 mouseover 等等
show: true, //注意这个,如果不写这个属性,你就会发现,你点击柱子的时候,它会触发两次
formatter: (e) => {//回调函数,就是有几个分类就有几个数组元素,每个元素是一个json对象
let icon1 = e[0]['marker'];//图标小点
let icon2 = e[1]['marker'];
let seriesName1 = e[0]['seriesName'];
let seriesName2 = e[1]['seriesName']
let title = e[0]['axisValue'];
let index = e[0]['dataIndex'];
let data = e[0]['value']
let valdata = e[1]['axisValue'];
let str = `<div>
<div style="margin-bottom:10px;">${icon1 + seriesName1}<span style="float:right; margin-left:30px;">${YiSuanYuSuanRuZhangShu[index]}</span></div>
<div>${icon2 + seriesName2}<span style="float:right; margin-left:30px;">${BenNianLeiJiWanChengShu[index]}</span></div>
</div>`
return str;//最后记得一定要返回出去
}
},
3、如果需要修改柱子的颜色和柱子里的字体颜色
{
name: '本年累计完成数',
type: 'bar',
barGap:'60%',//柱子的距离(这儿指的是多个分类中的柱子距离)
//label: labelOption,
emphasis: {
focus: 'series'
},
data: BenNianLeiJiWanChengShu,
label: {
normal: {
show: true,
textStyle: {//这儿设置字体的样式,比如字体大小,字体颜色等等
// 我们可以这样写
//fontSize:12,
//color:'#ff2f'
},
position: 'top',//可选 left right top bottom ....
verticalAlign: 'middle',
align: 'center',
//rotate: 90,//这个是设置是否是正常放置还是旋转90度放置
formatter: (parms) => {//重新定义在柱子中显示的内容
return BenNianLeiJiWanChengShu[parms.dataIndex]
}
},
},
itemStyle: {
normal: {
color: '#078cd0'//柱子的颜色
}
}
},
4、常用属性配置
//图例
legend: {
orient: 'vertical', //展示方向 vertical为坚向 horizontal为模向
type:'category', // 'plain':普通图例。缺省就是普通图例; 'scroll':可滚动翻页的图例。当图例数量较多时可以使用
x:'center', //水平的安方位置 可选值 left center right
y:'top', //坚向的安方位置 可选值 top center bottom
backgroundColor: '#fac858',
borderColor: '#5470c6',
borderWidth: '200', //图例的边框线,默认为 0
}
4.1饼图中的牵引线设置、屏图圆圈中间的文字
let color = ['#668EFD' , '#FB8071' , '#FFAB6F' , '#A886F6' , '#49DFDE']
let rich = {
d:{
color:'#668EFD',
fontSize:'12px',
},
a:{
color:'#FB8071',
fontSize:'12px',
},
b:{
color:'#FFAB6F',
fontSize:'12px',
},
c:{
color:'#A886F6',
fontSize:'12px',
},
g:{
color:'#49DFDE',
fontSize:'12px',
},
top:{
color:'#ffffff',
fontSize:'12px',
},
}
let colorRich = ['d' ,'a' ,'b' , 'c' , 'g'] //这儿的数组就是对应rich对象的键
data = [
{name:'油费' , value: ((25.22/55.761274)*100).toFixed(2) },
{name:'保险费用' , value:((1.017674/55.761274)*100).toFixed(2)},
{name:'过路费' , value:((10.7281/55.761274)*100).toFixed(2)},
{name:'维修费' , value:((10.668/55.761274)*100).toFixed(2)},
{name:'其他费用' , value:((8.1275/55.761274)*100).toFixed(2)},
]
var options = {
color:color,
graphic: [ //环形图中间添加文字 有几行就有几个json对象
{ //环形图中间添加文字
type: 'text', //通过不同top值可以设置上下显示
left:'center',
//left: '44%',
top: '45%', //也可以是字符串数值
style: {
text:'入库量',
textAlign: 'center',
fill: '#ffffff', //文字的颜色
fontSize: 24,
}
},
{ //环形图中间添加文字
type: 'text', //通过不同top值可以设置上下显示
left: 'center',
top: '53%', //也可以是字符串数值
style: {
text: '分类',
textAlign: 'center',
fill: '#ffffff', //文字的颜色
fontSize: 24,
}
}
],
legend: { //图例设置
show:true,
icon: "circle", //图例形状 (circle:圆 , rect:矩形 , roundRect: 圆角矩形 , triangle: 三角形 , diamond:菱形 , pin:大头针、徽章 , arrow:箭头 , none:无)
orient: 'vertical', // vertical 为竖向 ,想要横排,可以不设置
// 图例位置
//x:'center',
left: '0',
bottom: '0',
itemWidth: 10, // 图例的宽高
itemHeight: 10, //图例的宽高
itemStyle: {
borderWidth: 0,
},
/* 字体样式 */
textStyle: {
color: '#fff'
}
},
tooltip: { //鼠标移入到图中显示的信息 , 其实这儿如果不写,只是一个空的对象放着 tooltip:{} 也是一样可以实现提示的,只是没有那么详细
formatter: function (params) {
//console.log(params)
let str = `<p>
<span>${params.marker}</span>
<span>${params.name} : ${params.value} 万元</span>
</p>`
return str
//console.log(params.name , params.value)
}
},
series: [{
/* 样式 */
itemStyle: {
//borderWidth: 0,
//borderColor: '#fff'
},
/* 图表名称 */
name: '',
/* 类型 */
type: 'pie',
center:['60%' , '50%'], //位置 也可以是数值(字符串类型)
radius: ['40%', '80%'],/* 圆 大小 内环圆 外圆 也可以是数值(字符串类型) */
/* 数据 */
data: data, //数据最好就是name value
/* 指引线 */
labelLine: {
show: true,
normal: {
length: 5,//第一条线的长度
length2: 20, //第二条线的长度
lineStyle: {
color: '#ffffff'
}
}
},
/* 牵引线中的文字提示 */
label: {
color:'#ffffff',
formatter:(e)=>{
//这儿需要注意一下,top 也就是在上面 rich对象中的top健
return `{top|${e.name}} \n {${colorRich[e.dataIndex]}|${e.value} %}`
},
lineHeight:'20',
rich:rich, //rich等于上面定义的rich的对象
},
}]
}
4.2平滑曲线(折线)和阴影
let d = '后端返回的数据,大数组,里面的元素就是一个一个的json对象 我们只需要关注 展示在x轴和y轴的数据 )';
let RiQi = []; //X轴上 时间
let HeJi = []; //Y轴上 数值
d.forEach(item=>{
RiQi.push(item.RiQi)
let num = ((item.HeJi) / 10000).toFixed(2)
HeJi.push(num)
})
let options = {
grid: {//位置(整个图在 div中的位置) //支持 top right bottom left
bottom: '0%',
left:0,
right:0,
containLabel: true
},
title: [//标题 不用多说,可以多个,多个的时候用一个数组包起来,
{
show:true,
textStyle: {
fontWeight: 'normal',
color: '#ffffff',
fontSize:'12'
},
top:0,
left:0,
//right:'',
text: '万元',
},
{
show:false,
textStyle: {
fontWeight: 'normal',
color: '#ffffff',
fontSize:'12'
},
left:100,
top:0,
//right:'',
//text: '(万元)',
}
],
tooltip: {//跟饼图一样,是提示用的
formatter: function (params) {
let str = `<p>
<span>${params.marker}</span>
<span>${params.name} : ${params.value} 万元</span>
</p>`
return str
}
},
legend: {//图例,不多说,上面介绍过
show:false,
//data:['销量'],
textStyle: {
fontWeight: 'normal',
color: '#fff'
},
},
xAxis: {
data: RiQi,
axisLabel: {//x轴文字的配置
show: true,
textStyle: {
color: "#ffffff",
fontSize:'14'
}
},
show:true,
axisLine:{
show:true,
},
axisTick:{
show:true,
},
splitLine:{
show:false // 不显示网格线
},
},
yAxis: {
//type: "value",
//name: "(辆)",//name的做用就是在Y轴上显示的单位
nameTextStyle: {
padding:[0,0,0,150], //y轴的位置
color: "#ffffff",
fontSize:'14',
nameLocation: "start",
},
axisLabel: {//x轴文字的配置
show: true,
textStyle: {
color: "#ffffff",
fontSize:'14'
}
},
show:true,
axisLine:{
show:true,
},
axisTick:{
show:true,
},
splitLine:{
show:false // 不显示网格线
},
},
series: [
{
//name: '客车', 这儿的name值的意是 如果 tooltip 只是一个空对象的时候,它会带上这个name的内容
type: 'line',
data: HeJi,
color:'#FA8070',
//symbol: 'none', //折线上的空心圆点 不显示 (打开注释就表示线条没有小圆点)
smooth: true, //写上true表示线条是平滑的
tooltip:{
trigger:'item'
},
tooltip:{
trigger:'item'
},
itemStyle:{
normal:{
label : {
color:'#ffffff',
show: true // 在折线拐点上显示数据
},
lineStyle:{
//width:3, // 设置虚线宽度
//type:'dotted' // 虚线'dotted' 实线'solid'
}
}
},
areaStyle: {
color: { //设置折线的阴影
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#5E334C' // 0% 处的颜色
}, {
offset: 1, color: '#000338' // 100% 处的颜色
}],
global: false
}
},
},
]
}