echarts简单配置

折线图 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 +'
'
+ '今年销售：'+ params.data.totalSales +'
'
+ '去年销售：'+ params.data.refunedSales +'
'
+ '对比销售：'+ 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}
{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值]
}
]
]
}
},
]

image.png

image.png

柱状图：

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 '';
},
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'
                                }]);
                            }
                        },

},},