echarts – 折线图实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图一 -- 折线图</title>
<script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script>
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '日均销售额',
x: 'center'
},
tooltip: {},
legend: {
data: ['日均销售额'],
bottom: '0',
selectedMode:false // 取消图例的点击事件
},
xAxis: {
type: 'category',
data: ['JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC']
},
yAxis: {
type: 'value',
splitLine:{show: false} // 去掉网格线
},
series: [
{
name:'日均销售额',
type:'line',
data:[120, 132, 101, 134, 90, 230, 210, 22],
symbol:'circle', // 拐点样式
symbolSize: 6, // 拐点大小
itemStyle : {
normal : {
color: 'blue',
lineStyle:{
width:3,//折线宽度
color:"blue"//折线颜色
}
}
},
}
]
};
myChart.setOption(option);
</script>
</body>
</html>