直线图

Posted 2020-12-17 lzjjg

var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
title : {
// text: ‘Monthly Repayment (estimated)‘,
subtext: ‘Renta：$/qft2‘,
x:‘left‘,
top:10
},
tooltip: {
trigger: ‘axis‘,
axisPointer: {
type: ‘line‘,
lineStyle:{
color:‘#faa12f‘
},
z:1
},
backgroundColor:‘rgb(255,255,255)‘,
extraCssText:‘box-shadow:0 0 3px 3px rgba(0, 0, 0, 0.3)‘,
textStyle:{
color:‘#333‘
},
},

//x轴
xAxis: {
type: ‘category‘,
// boundaryGap: false,
// splitLine:{show: false},//去除网格线
// splitArea : {show : false},//去除网格区域

data: [‘3mth‘, ‘4mth‘, ‘5mth‘, ‘6mth‘, ‘7mth‘, ‘8mth‘, ‘9mth‘],

axisLine: {//x轴线设置
lineStyle: {
type: ‘solid‘,
color: ‘#f0f0f0‘,//x线的颜色
width:‘1‘//坐标线的宽度
}
},
axisLabel: {//x轴字体颜色
textStyle: {
color: ‘#949494‘,
}
},
axisTick:{//去掉x轴刻度
show: false
}
},
yAxis: {
type: ‘value‘,
// name: ‘Renta：$/qft2‘,
splitLine:{//保留网格线
show: true,
lineStyle:{//y轴网格线设置
color: ‘#f9f9f9‘,
width: 1,
type: ‘solid‘
}
},
splitArea : {show :false},//去除网格区域
axisLine: {//y轴线设置
lineStyle: {
type: ‘solid‘,
color:‘#f0f0f0‘,
width:‘1‘
}
},
axisLabel: {//y轴字体颜色
textStyle: {
color: ‘#949494‘
}
},
axisTick:{//去掉Y轴刻度
show: false
}

},
series: [{
data: [1800, 2200, 3600, 3000, 2000, 2900, 2500],
type: ‘line‘,
symbol:"circle",//设定为实心点 类型 ： ‘circle‘, ‘rect‘, ‘roundRect‘, ‘triangle‘, ‘diamond‘, ‘pin‘, ‘arrow‘, ‘none‘
symbolSize:6,//圆点大小
// showSymbol:true,
hoverAnimation:true,
        animation: true,

itemStyle: {
normal: {
color: "#faa12f",//圆点颜色
borderColor:‘rgba(251,222,153,0.5)‘,
borderWidth:8,

lineStyle: {//折线颜色大小
type:‘solid‘, //‘dotted‘虚线 ‘solid‘实线
color: "#faa12f",
width:1,
borderColor:‘#faa12f‘, //拐点边框颜色
}
}
},

// textStyle:{//x、y轴字体颜色大小
// fontSize:12,
// color:‘#949494‘
// },


}],


};
if (option && typeof option === "object") {
myChart.setOption(option, true);

————————————————
版权声明：本文为CSDN博主「闲来无事垂钓」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_39109182/article/details/88870225