折线图 https://blog.csdn.net/sleepwalker_1992/article/details/82709793；
echatsAPI:https://echarts.apache.org/zh/option.html#grid.containLabel
柱状图-间距 ： barCategoryGap: "61%"
series: [{
name: "Sale",
type: "bar",
data: [5, 20, 36, 10, 10, 20, 4],
barCategoryGap: "61%"
itemStyle: {
normal: {
barBorderRadius: 10,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ //渐变色
offset: 0,
color: '#22b6ed'
}, {
offset: 1,
color: '#3fE279'
}]),
label : { //显示数据
show: true ,
position:"right",
textStyle:{
fontSize:12,
color:'#000',
},
formatter: '{c}元',
}
}
},
}]
折线图 不贴边轴 : boundaryGap: false, //注释掉就行/或者true
toolbox: { // 展现图片，切换类型
feature: {
dataView: {show: true, readOnly: false},
restore: {show: true},
magicType: {
type: ['line', 'bar', 'stack']
},
saveAsImage: {show: true}
}
},
xAxis: {
axisTick: { //取消刻度线
show: false
},
axisLine:{ //设置 y轴边线
show:false //不显示轴线，
lineStyle: {
color:'#000'
},
symbol:['none','arrow'] //坐标轴箭头
},
axisLabel: { // 设置x，y轴文本值
textStyle: {
color:"xxx"
}
} ,
}
yAxis: [{
max:30,
// min:0,
type: 'value',
minInterval: 6,
interval:6， //每次增加几个
boundaryGap: [0, '100%'], //分别表示数据最小值和最大值的延伸范围
}],
max: function (value) {
return value.max + 10;
},
tooltip: {
trigger: 'item',
formatter: function (params) {
return params.data.axisValue +'</br>'
+ '今年销售：'+ params.data.totalSales +'</br>'
+ '去年销售：'+ params.data.refunedSales +'</br>'
+ '对比销售：'+ params.data.value;
}
},
tooltip ={ //提示框组件
trigger: 'item', //触发类型,'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。 'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
triggerOn:"mousemove", //提示框触发的条件,'mousemove'鼠标移动时触发。'click'鼠标点击时触发。'mousemove|click'同时鼠标移动和点击时触发。'none'不在 'mousemove' 或 'click' 时触发
showContent:true, //是否显示提示框浮层
alwaysShowContent:true, //是否永远显示提示框内容
showDelay:0, //浮层显示的延迟，单位为 ms
hideDelay:100, //浮层隐藏的延迟，单位为 ms
enterable:false, //鼠标是否可进入提示框浮层中
confine:false, //是否将 tooltip 框限制在图表的区域内
transitionDuration:0.4, //提示框浮层的移动动画过渡时间，单位是 s,设置为 0 的时候会紧跟着鼠标移动
position:['50%', '50%'], //提示框浮层的位置，默认不设置时位置会跟随鼠标的位置,[10, 10],回掉函数，inside鼠标所在图形的内部中心位置，top、left、bottom、right鼠标所在图形上侧，左侧，下侧，右侧，
formatter:"{b0}: {c0}<br />{b1}: {c1}", //提示框浮层内容格式器，支持字符串模板和回调函数两种形式,模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等
backgroundColor:"transparent", //标题背景色
borderColor:"#ccc", //边框颜色
borderWidth:0, //边框线宽
padding:5, //图例内边距，单位px 5 [5, 10] [5,10,5,10]
textStyle:mytextStyle, //文本样式
};
itemStyle : {
normal: {
label : {
show: true ,
position:"top",
textStyle:{
fontSize:12,
color:'#000'
}
},
color:"#8bc34a"
}},
title: {
text: '新增回访' ,
subtext: 'xxx0' , //副文本
x: 'center', // 水平安放位置，默认为左对齐，可选为：
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}（x坐标，单位px）
y: 'top',
backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#ccc', // 标题边框颜色
borderWidth: 0, // 标题边框线宽，单位px，默认为0（无边框）
padding: 5, // 标题内边距，单位px，默认各方向内边距为5，
itemGap: 10, // 主副标题纵向间隔，单位px，默认为10，
textStyle: {
fontSize: 18,
fontWeight: 'bolder',
color: '#333' // 主标题文字颜色
},
},
legend: {
show:true,
data:['one', 'two', 'tree'],
bottom:"50%",
right: '0%',
width:'100px',
height:'10%', //整体 heigth
// itemWidth:5, //图例标记的图形宽度
itemHeight:1, // 图例标记heigth
icon: 'ract',
align:'left',
borderColor:"#ccc",
},
grid: {
left: '0%',
right: '20%',
bottom: '0%',
containLabel: true
},
折线
series: [{
name:'one',
data: [22, 23, 21, 24, 10, 20, 20],
type: 'line',
smooth: true,
// markPoint: { // markLine 也是同理
// data: [{
// coord: [5, 33.4], // 其中 5 表示 xAxis.data[5]，即 '33' 这个元素。
// // coord: ['5', 33.4] // 其中 '5' 表示 xAxis.data中的 '5' 这个元素。
// // 注意，使用这种方式时，xAxis.data 不能写成 [number, number, ...]
// // 而只能写成 [string, string, ...]
// }]
// },
itemStyle : {
normal: {
label : {
show: true ,
position:"top",
textStyle:{
fontSize:12,
color:'#000'
}
},
color:"#8bc34a"
}},
markLine: {
itemStyle: { //盒须图样式。
color:"#f5f5f5"
},
lineStyle: {
color:"green"
} ,
// name: 'cc',
//yAxisIndex: 0,
// symbol:'none',//去掉箭头
data: [
[
{
name: '两个坐标之间的标线',
coord: [0, 40] // [data的index,y值]
},
{
coord: [6, 20]// [data的index,y值]
}
]
]
}
},
]
柱状图：
series : [
{
type:'bar',
barWidth:50,
data:[10, 52, 200, 334, 390, 330, 220],
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'black',
fontSize: 16
}
}
}
}
}
],
网格线加粗
yAxis: {
type: 'value',
axisTick: { //取消刻度线
show: false
},
splitLine: { // ----线条加粗
show: true,
lineStyle:{
color: ['#315070'],
width: 1,
type: 'solid'
}
},
boundaryGap: [0, '100%'] // x轴 数值 auto
axisLine:{
show:false //不显示轴线
},
},
加水印
- 使用图片
graphic: [
{
type: 'image', // 图形元素类型
id: 'logo', // 更新或删除图形元素时指定更新哪个图形元素，如果不需要用可以忽略。
right: 'center', // 根据父元素进行定位 （居中）
bottom: '0%', // 根据父元素进行定位 （0%）, 如果bottom的值是 0，也可以删除该bottom属性值。
z: 0, // 层叠
rotation:-100,
// bounding: 'all', // 决定此图形元素在定位时，对自身的包围盒计算方式
style: {
image: '/static/common/images/sklogo.png', // 这里一定要注意、注意，必须是https开头的图片路径地址
width: 400,
height:80
}
},
{
type: 'image', // 图形元素类型
id: 'logo3', // 更新或删除图形元素时指定更新哪个图形元素，如果不需要用可以忽略。
left: '60%', // 根据父元素进行定位 （居中）
bottom: '-10%', // 根据父元素进行定位 （0%）, 如果bottom的值是 0，也可以删除该bottom属性值。
z: 0, // 层叠
rotation:-100,
// bounding: 'all', // 决定此图形元素在定位时，对自身的包围盒计算方式
style: {
image: '/static/common/images/sklogo.png', // 这里一定要注意、注意，必须是https开头的图片路径地址
width: 400,
height:80
}
},
], - 使用文字
graphic: [
{
type: 'text',
rotation:-100,
opacity:0,
z:-1,
style: {
text: 'XXXX考研',
x: 100,
y: 900,
fill: '#eee',
font: '90px Microsoft YaHei ',
}
}
加载loading
myChart.showLoading({
text: "图表数据正在努力加载...",
x: "center",
y: "center",
textStyle: {
color: "red",
fontSize: 14
},
effect: "spin"
});
myChart.hideLoading(); // 隐藏
柱形图上添加自定义icon,也是在series里面，在lable的同级添加如下代码
markPoint: {
formatter: function(params){
return '<img src="'
+ params.data.symbol.replace('image://', '')
+ '"/>';
},
symbolSize:'15',
data: [
{coord: [0,10],symbolOffset:[20,-20],symbol:'image://../../../static/img/top.png'},
{coord: [1,10],symbolOffset:[20,-20],symbol:'image://../../../static/img/bottom.png'},
{coord: [2,20],symbolOffset:[20,-20],symbol:'image://../../../static/img/top.png'},
{coord: [3,20],symbolOffset:[20,-20],symbol:'image://../../../static/img/top.png'},
{coord: [4,20],symbolOffset:[20,-20],symbol:'image://../../../static/img/bottom.png'},
{coord: [5,20],symbolOffset:[20,-20],symbol:'image://../../../static/img/top.png'},
{coord: [6,20],symbolOffset:[20,-20],symbol:'image://../../../static/img/bottom.png'},
],
label:{
show:true,
position:'middle'
}
}
coord:[0,10],一个参数是我们想要添加icon柱形图的index,第二个是柱形图的value,即我们显示在柱形图上的数据
symbolOffset：使我们icon在柱状图上的位置，分别代表x,y轴的偏移量
symbol:是我们添加icon的路径，格式是image://+图片路径
判断数据是否超过目标值 设置另一个颜色
itemStyle: {
normal: {
barBorderRadius: 10,
color: function(params) {
var idx = params.dataIndex;
if (source.amount[idx]>source.sale_goal[idx]) {
return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#22b6ed'
}, {
offset: 1,
color: 'red'
}]);
} else {
return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#22b6ed'
}, {
offset: 1,
color: '#3fE279'
}]);
}
},
},},
