charts折線圖設置拐點圖標，可自定義。
<!DOCTYPE html>
<html>
<head>
<title>0006.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/esl.js"></script>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<script type="text/javascript">
require.config({
paths:{
'echarts' : '../js/echarts',
'echarts/chart/bar' :'../echart2/build/echarts',
'echarts/chart/line' :'../echart2/build/echarts'
}
});
require(
[
'echarts',
'echarts/chart/line',
'echarts/chart/bar'
],
//回調函數
DrawEChart //這裏是調用一個函數用於繪製圖表
);
function DrawEChart(ec) {
var chartContainer = document.getElementById("main");
var myChart = ec.init(chartContainer);
var option= {
tooltip : {
trigger: 'axis'
},
legend: {
data:['郵件營銷','聯盟廣告','直接訪問','搜索引擎']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
//折線圖，柱形圖，堆積圖，平鋪切換
restore : {show: true},//還原
saveAsImage : {show: true}
}
},
calculable : true,//是否啓用拖拽重計算特性
xAxis : [
{
type : 'category',
//數值軸兩端空白策略，數組內數值代表百分比，[原始數據最小值與最終最小值之間的差額，原始數據最大值與最終最大值之間的差額]
boundaryGap : false,
data : ['週一','週二','週三','週四','週五','週六','週日']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'郵件營銷',
type:'line',
stack: '總量',
symbol: 'none',
itemStyle: {
normal: {
areaStyle: {
// 區域圖，縱向漸變填充
color : (function (){
var zrColor = require('zrender/tool/color');
return zrColor.getLinearGradient(
0, 200, 0, 400,
[[0, 'rgba(255,0,0,0.8)'],[0.8, 'rgba(255,255,255,0.1)']]//堆積圖的漸變色
)
})()
}
}
},
data:[
120, 132, 301, 134,
{value:90, symbol:'droplet',symbolSize:5},
230, 210
]
},
{
name:'聯盟廣告',
type:'line',
stack: '總量',
smooth: true,
symbol: 'image://../asset/ico/favicon.png', // 系列級個性化拐點圖形
symbolSize: 8,
data:[
120, 82,
{
value:201,
symbol: 'star', // 數據級個性化拐點圖形
symbolSize : 15,
itemStyle : { normal: {label : {
show: true,
textStyle : {
fontSize : '20',
fontFamily : '微軟雅黑',
fontWeight : 'bold'
}
}}}
},
{
value:134,
symbol: 'none'
},
190,
{
value : 230,
symbol: 'emptypin',
symbolSize: 8
},
]
},
{
name:'直接訪問',
type:'line',
stack: '總量',
symbol: 'arrow',
symbolSize: 6,
symbolRotate: -45,
itemStyle: {
normal: {
color: 'red',
lineStyle: { // 系列級個性化折線樣式
width: 2,
type: 'dashed'
}
},
emphasis: {
color: 'blue'
}
},
data:[
320, 332, '-', 334,
{
value: 390,
symbol: 'star6',
symbolSize : 20,
symbolRotate : 10,
itemStyle: { // 數據級個性化折線樣式
normal: {
color: 'yellowgreen'
},
emphasis: {
color: 'orange',
label : {
show: true,
position: 'inside',
textStyle : {
fontSize : '20'
}
}
}
}
},
330, 320
]
},
{
name:'搜索引擎',
type:'line',
symbol:'emptyCircle',
itemStyle: {
normal: {
lineStyle: { // 系列級個性化折線樣式，橫向漸變描邊
width: 2,
color: (function (){
var zrColor = require('zrender/tool/color');
return zrColor.getLinearGradient(
0, 0, 1000, 0,
[[0, 'rgba(255,0,0,0.8)'],[0.8, 'rgba(255,255,0,0.8)']]
)
})(),
shadowColor : 'rgba(0,0,0,0.5)',
shadowBlur: 10,
shadowOffsetX: 8,
shadowOffsetY: 8
}
},
emphasis : {
label : {show: true}
}
},
data:[
620, 732, 791,
{value:734, symbol:'emptyHeart',symbolSize:10},
890, 930, 820
]
}
]};
myChart.setOption(option);}
</script>
<div id="main" style="height:400px"></div>
</body>
</html>