码迷,mamicode.com
首页 > 其他好文 > 详细

直线图

时间:2020-07-13 09:52:48      阅读:83      评论:0      收藏:0      [点我收藏+]

标签:设置   链接   去掉   https   sub   category   get   ado   name   


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

直线图

标签:设置   链接   去掉   https   sub   category   get   ado   name   

原文地址:https://www.cnblogs.com/LZJJG/p/13291486.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!