ECharts可视化图表-折线图总结
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script> <!-- 通过cdn引入 -->
</head>
<body>
<div id="main" style="width: 800px;height:400px;margin:20px auto"></div>
</body>
</html>
<script>
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: 'Fanso Fen',
top: '5%',
left: 'center',
textStyle: {
color: '#FFF',
align: 'center',
}
},
tooltip: {
show: true,
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
orient: 'horizontal',
left: 'left',
textStyle: {
color: '#333',
fontStyle: 12
},
itemGap: 10,
selectedMode: true,
icon: "circle",
data: [{
name: 'PV',
textStyle: {
color: '#000',
fontSize: 14
},
icon: 'image://data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gAUU29mdHdhcmU6IFNuaXBhc3Rl/9sAQwADAgIDAgIDAwMDBAMDBAUIBQUEBAUKBwcGCAwKDAwLCgsLDQ4SEA0OEQ4LCxAWEBETFBUVFQwPFxgWFBgSFBUU/9sAQwEDBAQFBAUJBQUJFA0LDRQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQU/8AAEQgAEwAlAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A/T7UdXstNkY3U0UH+07gVh6t4706ysnnhuIrl1xtSNwST0rY1Lw3pmtnzL2yhuPeRAc1i6p8OdHuoClpYwWco+7LCgUj8q1jyLc4K8KsvgMqHx5d2dzANVhjtrW5+4xPP866OLxfpTAD7bBs7DeM1gn4fy301udVmiu4bb/VoVH6+vSty38DaCAH/sm13/3jEM/yq5um17pFOGIXxGtBfRXEYeF96eqsKKW30u1tY9kMKRp/dUYFFY6HXaZcb7lNABU0UVJqxrxqCDjmnocrRRQCHUUUUFH/2Q=='
},
{
name: 'UV',
textStyle: {
color: '#000',
fontSize: 14
},
icon: 'image://data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gAUU29mdHdhcmU6IFNuaXBhc3Rl/9sAQwADAgIDAgIDAwMDBAMDBAUIBQUEBAUKBwcGCAwKDAwLCgsLDQ4SEA0OEQ4LCxAWEBETFBUVFQwPFxgWFBgSFBUU/9sAQwEDBAQFBAUJBQUJFA0LDRQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQU/8AAEQgAGAAnAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A/UuaZkXg/iFzUE+ppbKfMdE9N7baztVXWfM3WixNGP8AlnISAfxArEuf7SF/aNfi1SAD5wrE4/MVEpcpEnY6SLX7SeQxpdW7Sf3VkBNXEnMnt+HFcZqMqvLCNKFt5oJ3EjB6/StCFPEErqXS0VR/Ertn8sUlUvoJPU3Lq/jsQsk80ccXQ7iBzRXn/wAcBe/8IA00Me65WeMfuickE9aK0ND0+T7tU7i1jmPzIG+tFFZzIaGpYQRtuWFQ3ripJYyVypKkdMUUVnBCS1Kd4I5UEcqozyAbwyFl4+lFFFdBof/Z'
}
]
},
grid: {
left: '3%',
right: '8%',
bottom: '3%',
containLabel: true
},
xAxis: [{
show: true,
name: '',
type: 'category',
axisTick: {
show: false,
},
data: ['2019/11/11', '2019/11/12', '2019/11/13', '2019/11/14', '2019/11/15', '2019/11/16','2019/11/17'],
boundaryGap : false,
}],
yAxis: [
{
type: 'value',
name: '(单位:次)',
min: 0,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: '#eee'
}
},
splitNumber:6
},
{
type: 'value',
name: '(单位:人)',
min: 0,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
lineStyle: {
color: '#eee'
}
},
splitNumber:6
},
],
series: [{
name: 'PV',
type: 'line',
symbol: 'circle',
symbolSize: 8,
itemStyle: {
normal: {
color: '#fff',
borderColor:'#b1e4e4',
}
},
lineStyle: {
normal:{
color:'#b1e4e4',
width:1
}
},
areaStyle:{
normal:{
color:new echarts.graphic.LinearGradient(0,0,0,1,[
{ offset:0,color:'skyblue' },{ offset:1,color:"rgba(255,255,255,0.5)" }])
}
},
data: [24610, 24100, 24030, 21030, 21030, 21030, 21030]
},
{
name: 'UV',
type: 'line',
yAxisIndex:1,
symbol: 'rect',
symbolSize: 8,
itemStyle: {
normal: {
color: '#fff',
borderColor:'#bfc9b1',
}
},
lineStyle: {
color: "purple",
width: 1
},
data: [160, 221, 221, 221, 221, 250, 200, ]
},
]
};
myChart.setOption(option);
</script>