效果圖如下圖所示

1.繪制一個圖表時，需要有一個給定寬高的容器；基本配置可以閱讀echarts的文檔；里面有很多示例demo~~

html 結構：

<div id="box"></div>

css樣式：

<style>
#box{
width: 600px;
height: 400px;
border: 1px solid #e4e4e4;
}
</style>

js:

1. 首先需要引入echarts.js 的文件；可從echarts官網中按需要進行下載，鏈接：http://echarts.baidu.com/download.html

2. ?如下為js代碼；可以根據注釋來理解；

其中有幾個點也是通過查閱文檔與百度所得，僅此記錄，方便以后查閱與完善。

（1）. 設置折線的虛實，不同折線的顏色設定；

（2）. 對折線的拐點樣式進行修改設置（拐點大小；拐點背景顏色）；達到所求；

（3）. 坐標軸的樣式（顏色，旋轉-適用于內容較多時的完整顯示，例如時間）。

<script>
// 獲取到這個DOM節點，然后初始化

var myChart = echarts.init(document.getElementById("box"));
var option = {
// 標題
title: {
text: '折線圖堆疊'
},
tooltip: {
trigger: 'axis'
},
//圖例名
legend: {
data:['郵件營銷','郵件營銷1','視頻廣告','視頻廣告1']
},
grid: {
left: '3%', //圖表距邊框的距離
right: '4%',
bottom: '3%',
containLabel: true
},
//工具框，可以選擇
toolbox: {
feature: {
saveAsImage: {}
}
},
//x軸信息樣式
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日'],
//坐標軸顏色
axisLine:{
lineStyle:{
color:'red'
}
},
//x軸文字旋轉
axisLabel:{
rotate:30,
interval:0
},
},
yAxis: {
type: 'value'
},
series: [
//虛線
{
name:'郵件營銷',
type:'line',
symbolSize:8, //拐點圓的大小
color:['red'], //折線條的顏色
data:[800, 300, 500, 800, 300, 600,500],
smooth:false, //關鍵點，為true是不支持虛線的，實線就用true
itemStyle:{
normal:{
lineStyle:{
width:2,
type:'dotted' //'dotted'虛線 'solid'實線
}
}
},
},
//實線
{
name:'郵件營銷1',
type:'line',
symbol:'circle',
symbolSize:8,
itemStyle:{
normal:{
color:'red',
borderColor:'red', //拐點邊框顏色
}
},
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name:'視頻廣告',
type:'line',
stack: '總量',
symbolSize:8,
color:['orange'],
smooth:false, //關鍵點，為true是不支持虛線的，實線就用true
itemStyle:{
normal:{
lineStyle:{
width:2,
type:'dotted' //'dotted'虛線 'solid'實線
}
}
},
data:[150, 232, 201, 154, 190, 330, 410]
},
{
name:'視頻廣告1',
type:'line',
stack: '總量',
color:['orange'],
symbol:'circle',
symbolSize:8,
data:[320, 332, 301, 334, 390, 330, 320],
itemStyle:{
normal:{
color:'orange',
borderColor:'orange',
}
},
},

]
};

myChart.setOption(option);
</script>

?

轉載于:https://www.cnblogs.com/RighTgraM/p/10925038.html

總結

以上是生活随笔為你收集整理的跟随我在oracle学习php（40）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。