Echarts折线图属性图说明
2019-04-09 本文已影响0人
lvyweb
标签（空格分隔）： js
Echarts作为一个能满足基本图标的工具，我来记录一下自己的使用属性
<script src="../js/echarts.js"></script>
</head>
<body style="background-color: #323337">
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
tooltip: {
backgroundColor: '#1690f5',//浮动框背景色
trigger: 'axis',
axisPointer: {
type: 'cross',
label: { //标注x和y显示两个数值
backgroundColor: 'skyblue',
borderColor: '#aaa',
borderWidth: 1,
shadowBlur: 0,
shadowOffsetX: 0,
shadowOffsetY: 0,
textStyle: {
color: 'yellow'
}
},
crossStyle: { //触发线y轴的样式
color: "green",
type: "solid", // solid deshed dotted
width: 4,
},
lineStyle: {
color: "red",
width: 4,
}
},
formatter: function (params, ticket, callback) {
var toolTip = "x: " + params[0].name + "<br>" + "y: " + params[0].value;
return toolTip;
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis:[ {
type: 'category',
boundaryGap: false,
splitLine: { //网格线设置
show: true,
lineStyle: {
color: ['#ccc']
}
},
axisLabel: {
show: true,
textStyle: {
color: '#d5d5d5'
}
},
axisLine:{
lineStyle:{
color:'#FF0000',
width:8,//这里是为了突出显示加上的
}
},
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},],
yAxis: [{
type: 'value',
splitLine: {
show: true,
lineStyle: {
color: ['#ccc']
},
},
axisLabel: {
show: true,
textStyle: {
color: '#d5d5d5'
}
},
axisLine:{
lineStyle:{
color:'#FF0000',//x轴颜色
width:8,//这里是为了突出显示加上的
}
},
}, ],
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true, //折线是否带尖
areaStyle: {
normal: {
color: "skyblue",
}
},
lineStyle: {
normal: {
color: "blue",
}
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
Echarts折线图.png
