效果圖如下圖所示

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

html 結(jié)構(gòu)：

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

css樣式：

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

js:

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

2. ?如下為js代碼；可以根據(jù)注釋來(lái)理解；

其中有幾個(gè)點(diǎn)也是通過(guò)查閱文檔與百度所得，僅此記錄，方便以后查閱與完善。

（1）. 設(shè)置折線的虛實(shí)，不同折線的顏色設(shè)定；

（2）. 對(duì)折線的拐點(diǎn)樣式進(jìn)行修改設(shè)置（拐點(diǎn)大小；拐點(diǎn)背景顏色）；達(dá)到所求；

（3）. 坐標(biāo)軸的樣式（顏色，旋轉(zhuǎn)-適用于內(nèi)容較多時(shí)的完整顯示，例如時(shí)間）。

<script>
// 獲取到這個(gè)DOM節(jié)點(diǎn)，然后初始化

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

?

轉(zhuǎn)載于:https://www.cnblogs.com/RighTgraM/p/10925038.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。