示例里工作一般情況是夠用了,更復雜的可以查詢教程:
title 官方解說:http://echarts.baidu.com/option.html#title
坐標相關: X軸:http://echarts.baidu.com/option.html#xAxis
坐標相關: Y軸:http://echarts.baidu.com/option.html#yAxis
表格部分:http://echarts.baidu.com/option.html#grid
<script>
function getChartsLine() {var myChart = echarts.init(document.getElementById('progress'),'macarons'
);var option =
{title: {text: '工程折線圖',
//主標題
textStyle:{color:'#0DB9F2',
//顏色fontStyle:'normal',
//風格fontWeight:'normal',
//粗細fontFamily:'Microsoft yahei',
//字體fontSize:14,
//大小align:'center'
//水平對齊
},subtext:'副標題',
//副標題subtextStyle:{
//對應樣式color:'#F27CDE'
,fontSize:14
},itemGap:7
},grid:{ //顯示數據的圖表位于當前canvas的坐標軸x:50
,y:55
,x2:50
,y2:60
,borderWidth:1
},tooltip: {trigger: 'axis'
},legend: {data:["計劃完成","實際完成"
]},toolbox: {show: true,feature: {saveAsImage: {}}},xAxis: {type: 'category'
,boundaryGap: false,data: ["2015-1", "2015-2", "2015-3", "2015-4", "2015-5", "2015-6", "2015-7", "2015-8", "2015-9", "2015-10", "2015-11", "2015-12"
]},yAxis: {type: 'value'
,//默認以千分位顯示,不想用的可以在這加一段axisLabel : {
//調整左側Y軸刻度, 直接按對應數據顯示show:
true,showMinLabel:true,showMaxLabel:true,formatter: function (value) {return value;}}},series: [{name:"計劃"
,type:'line'
,data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 300, 2.3
],markPoint: {data: [{type: 'max', name: '最大值'
},{type: 'min', name: '最小值'
}]},markLine: {data: [{type: 'average', name: '平均值'
},[{symbol: 'none'
,x: '90%'
,yAxis: 'max'
}, {symbol: 'circle'
,label: {normal: {position: 'start'
,formatter: '最大值'
}},type: 'max'
,name: '最高點'
}]]}},{name:"實際"
,type:'line'
,data:[0, 0, 37, 0, 0, 15, 3036, 5572, 0, 0, 0, 0
],markPoint: {data: [{type: 'max', name: '最大值'
},{type: 'min', name: '最小值'
}]},markLine: {data: [{type: 'average', name: '平均值'
},[{symbol: 'none'
,x: '90%'
,yAxis: 'max'
}, {symbol: 'circle'
,label: {normal: {position: 'start'
,formatter: '最大值'
}},type: 'max'
,name: '最高點'
}]]}}]};myChart.setOption(option);}getChartsLine();
</script>
?
修改后:
轉載于:https://www.cnblogs.com/shuilangyizu/p/11566726.html
總結
以上是生活随笔為你收集整理的EChart 标题 title 样式,x轴、y轴坐标显示,调整图表位置等的全部內容,希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。