Echars折线配置详解
生活随笔
收集整理的這篇文章主要介紹了
Echars折线配置详解
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Echars折線配置詳解
比如做成如下效果圖：
所有的配置如下：
var option = {tooltip: { // 提示框trigger: 'axis', // 觸發類型(坐標軸觸發)alwaysShowContent: false, // 是否永遠顯示提示框的內容backgroundColor: 'rgba(32, 174, 252, 0.7)', // 提示框的背景顏色textStyle: { // 提示框浮層的文本樣式}},calculable: true,// x軸設置xAxis: [{type: 'category',name: '(月)', // x軸名稱單位nameLocation: 'end', // 名稱的位置nameTextStyle: { // 名稱的樣式color: '#999',fontSize: '12px'},nameGap: 0, // 名稱與X軸的距離boundaryGap: true, // 坐標的刻度是否在中間min: '3', // 坐標軸刻度的最小值max: '12', // 坐標軸刻度的最大值axisLine: { // 坐標軸線條相關設置(顏色等)lineStyle: {color: '#ccc'}},axisTick: { // 坐標軸刻度相關設置length: '0' // 長度設置為0},axisLabel: { // 坐標軸刻度標簽margin: 7, // 刻度標簽與軸線之間的距離textStyle: {color: '#999', // 坐標軸刻度文字的顏色fontSize: '12px' // 坐標軸刻度文字的大小},// rotate: 30 // 旋轉30度},data: ['3', '4', '5', '7', '8', '12'],// show: false}], // y軸設置yAxis: [ {type: 'value', // 類型數值軸name: '(人)', // Y軸名稱單位nameTextStyle: { // 名稱的樣式color: '#999',fontSize: '12px'},nameGap: 13, // 名稱與Y軸的距離axisTick: { // 坐標軸相關設置length: '0'},axisLine: { // 坐標軸線條相關設置(顏色等)lineStyle: {color: '#ccc'}},axisLabel: { // 坐標軸標簽相關設置，距離顏色等margin: 7, // 刻度標簽與軸線之間的距離// formatter: '{value} C', // 標簽內容內置的格式轉化器在后面加一個單位值textStyle: {color: '#999', // 坐標軸刻度文字的顏色fontSize: '12px' // 坐標軸刻度文字的大小}},splitLine: { // 坐標軸分割線。默認數值軸顯示，類目軸不顯示show: false}}],grid: { // 直角坐標系內繪圖網格left: 36 },series: [ // 系列列表{name: '人', // 系列名稱，用于tooltip的顯示type: 'line',data: [2, 2, 2, 2, 2, 7, 2],itemStyle: { // 折線拐點的樣式normal: {color: '#20aefc' // 拐線拐點的顏色}},lineStyle: { // 線條的樣式normal: {color: '#20aefc', // 折線的顏色}},smooth: 0.3, // 是否平滑處理，如果是Number類型(取值范圍為0到1)，表示平滑程度，越小越接近折線段，反之areaStyle: { // 區域填充的樣式normal: {// 線性漸變color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: '#b1e3fe' // 0% 處的顏色}, {offset: 1, color: '#fff' // 100% 處的顏色}], false)}},markPoint: { // 圖標標注data: [{type: 'max', name: '最大值'},{type: 'min', name: '最小值'}]},markLine: {data: [{type: 'average', name: '平均值'}]}},{name: '人', // 系列名稱，用于tooltip的顯示type: 'line',data: [6, 6, 6, 6, 6, 6, 6],itemStyle: { // 折線拐點的樣式normal: {color: '#20aefc' // 拐線拐點的顏色}},// smooth: 0.3, // 是否平滑處理，如果是Number類型(取值范圍為0到1)，表示平滑程度，越小越接近折線段，反之lineStyle: { // 線條的樣式normal: {color: '#20aefc', // 折線的顏色}},areaStyle: { // 區域填充的樣式normal: {// 線性漸變color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: '#b1e3fe' // 0% 處的顏色}, {offset: 1, color: '#fff' // 100% 處的顏色}], false)}},markPoint: { // 圖標標注data: [{type: 'max', name: '最大值'},{type: 'min', name: '最小值'}]},markLine: {data: [{type: 'average', name: '平均值'}]}},{name: '人', // 系列名稱，用于tooltip的顯示type: 'line',data: [10, 10, 10, 10, 10, 10, 10],itemStyle: { // 折線拐點的樣式normal: {color: '#20aefc' // 拐線拐點的顏色}},lineStyle: { // 線條的樣式normal: {color: '#20aefc', // 折線的顏色}},areaStyle: { // 區域填充的樣式normal: {// 線性漸變color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: '#b1e3fe' // 0% 處的顏色}, {offset: 1, color: '#fff' // 100% 處的顏色}], false)}},markPoint: { // 圖標標注data: [{type: 'max', name: '最大值'},{type: 'min', name: '最小值'}]},markLine: {data: [{type: 'average', name: '平均值'}]}}] };HTML代碼：
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>ECharts</title><!-- 引入 echarts.js --><script src="./echarts4.x.js"></script><script type="text/javascript" src="./zhexian.js"></script> </head> <body><!-- 為ECharts準備一個具備大小（寬高）的Dom --><div id="main" style="width: 400px;height:400px;margin: 0 auto"></div><script type="text/javascript">// 基于準備好的dom，初始化echarts實例var myChart = echarts.init(document.getElementById('main'));// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);</script> </body> </html>轉載自：https://www.cnblogs.com/tugenhua0707/p/9380352.html
總結
以上是生活随笔為你收集整理的Echars折线配置详解的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 进程与线程区别
- 下一篇： Pyhton随机生成测试数据模块fake