echarts折線圖

詳細信息

標題

//標題組件，包含主標題和副標題。
let title = {
    id:'',//組件 ID。默認不指定。指定則可用於在 option 或者 API 中引用組件
    show:true,//是否顯示標題組件
    text:'',//主標題文本，支持使用 \n 換行。
    link:'',//主標題文本超連接
    target:'',// 指定窗口打開主標題超連接。   'self' 當前窗口打開    'blank' 新窗口打開
    textStyle:{
        color:'#333',//主標題文字的顏色
        fontStyle:'normal',//主標題文字字體的風格   'normal' 'italic' 'oblique'
        fontWeight:'',//主標題文字字體的粗細
        fontFamily:'',//主標題文字的字體系列
        fontSize:18,//主標題文字的字體大小
        lineHeight:18,//行高
        width:'',//文字塊的寬度。通常不用指定，不指定則自動是文字的寬度。
        height:'',//文字塊的高度。通常不用指定，不指定則自動是文字的高度。
        textBorderColor:'transparent',//文字自己的描邊顏色
        textBorderWidth:10,//number 文字自己的描邊寬度
        textShadowColor:'transparent',//Color 文字自己的陰影顏色
        textShadowBlur:10,//number 文字自己的陰影長度。
        textShadowOffsetX:10,//number 文字自己的陰影 X 偏移。
        textShadowOffsetY:10,//number 文字自己的陰影 Y 偏移
        rich:{
         // 在 rich 裏面，能夠自定義富文本樣式。利用富文本樣式，能夠在標籤中作出很是豐富的效果。
        }
    },
    subtext:'',//string  副標題文本，支持使用 \n 換行
    sublink:'',//副標題文本超連接
    subtarget:'',//指定窗口打開副標題超連接
    subtextStyle:{},//副標題樣式
    textAlign:'auto',//總體（包括 text 和 subtext）的水平對齊 可選值：'auto'、'left'、'right'、'center'
    textVerticalAlign:'',//總體（包括 text 和 subtext）的垂直對齊 可選值：'auto'、'top'、'bottom'、'middle'
    triggerEvent:false,//是否觸發事件
    padding:5,//padding: 5  內邊距爲5    padding: [5, 10]設置上下的內邊距爲 5，左右的內邊距爲 10    padding:[5,10,5,10] //上右下左
    itemGap：10,//主副標題之間的間距
    zlevel:0,//zlevel用於 Canvas 分層
    Z:2,//組件的全部圖形的z值。控制圖形的先後順序。z值小的圖形會被z值大的圖形覆蓋。z相比zlevel優先級更低，並且不會建立新的 Canvas。
    left:'auto',//title 組件離容器左側的距離。 left 的值能夠是像 20 這樣的具體像素值，能夠是像 '20%' 這樣相對於容器高寬的百分比，也能夠是 'left', 'center', 'right'
    top:'auto',
    right:'auto',
    bottom:'auto',
    backgroundColor:'transparent',//標題背景色，默認透明
    borderColor:'#ccc',//標題的邊框顏色
    borderWidth:0,//標題的邊框線寬
    borderRadius:5,//圓角半徑，單位px，支持傳入數組分別指定 4 個圓角半徑 borderRadius: 5, // 統一設置四個角的圓角大小  borderRadius: [5, 5, 0, 0] //（順時針左上，右上，右下，左下）
    shadowBlur:10,//圖形陰影的模糊大小
    shadowColor:'',//陰影顏色
    shadowOffsetX:0,//陰影水平方向上的偏移距離
    shadowOffsetY:0,//陰影垂直方向上的偏移距離
 }

圖例

詳細信息

let legend = {
    type:'plain',//'plain'：普通圖例。缺省就是普通圖例      'scroll'：可滾動翻頁的圖例。當圖例數量較多時能夠使用。
    orient:'horizontal',//圖例列表的佈局朝向   'horizontal'  'vertical'
    align:'auto',//圖例標記和文本的對齊  auto left right
    itemGap:10,//圖例每項之間的間隔。橫向佈局時爲水平間隔，縱向佈局時爲縱向間隔。
    itemWidth:25,//圖例標記的圖形寬度
    itemHeight:14,//圖例標記的圖形高度
    symbolKeepAspect:true,//是否在縮放時保持該圖形的長寬比
    formatter:'Legend {name}',//用來格式化圖例文本，支持字符串模板和回調函數兩種形式 ||  使用回調函數formatter: function (name) {return 'Legend ' + name;}
    selectedMode:true,//圖例選擇的模式，控制是否能夠經過點擊圖例改變系列的顯示狀態。默認開啓圖例選擇，能夠設成 false 關閉
    textStyle:{},//圖例的公用文本樣式
    icon:'',//圖例項的 icon。標記類型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
    data:[],//圖例的數據數組
}

直角座標系內繪圖網格

詳細信息

let grid = {
    left:'10%',//grid 組件離容器左側的距離
    top:60,//
    right:'',
    bottom:'',
    ....
}

直角座標系 grid 中的 x 軸

詳細信息

let xAxis = {
    nameTextStyle:{},//座標軸名稱的文字樣式
    axisLine:{},//座標軸軸線相關設置
    axisTick:{},//座標軸刻度相關設置
    axisLabel:{},//座標軸刻度標籤的相關設置
    splitLine：{},//座標軸在 grid 區域中的分隔線
}

折線圖設置

詳細信息

let series = [
    {
        type:'line',
        showSymbol:true,//是否顯示 symbol
        symbol:'emptyCircle',//拐點 標記類型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
        symbolSize：4,//標記的大小，能夠設置成諸如 10 這樣單一的數字，也能夠用數組分開表示寬和高，例如 [20, 10] 表示標記寬爲20，高爲10;
        hoverAnimation:true,//是否開啓 hover 在拐點標誌上的提示動畫效果
        step:true,//是不是階梯線圖。能夠設置爲 true 顯示成階梯線圖，也支持設置成 'start', 'middle', 'end' 分別配置在當前點，當前點與下個點的中間點，下個點拐彎。
        itemStyle:{},//折線拐點標誌的樣式
        lineStyle:{ },//線條樣式
        areaStyle:{},//區域填充樣式
        emphasis:{},//圖形的高亮樣式
        smooth:false,//若是是 boolean 類型，則表示是否開啓平滑處理。若是是 number 類型（取值範圍 0 到 1），表示平滑程度，越小表示越接近折線段，反之則反。設爲 true 時至關於設爲 0.5
        data:[],//系列中的數據內容數組。數組項一般爲具體的數據項
        ...
    }
]

使用

<div id="myChart" :style="{width: '600px', height: '360px'}"></div>
<script>
let myChart = this.$echarts.init(document.getElementById('myChart'))
myChart.setOption({
    title: {
        text: '訂單來源',
        textStyle:{
            color:'#333333',
            fontWeight:'400',
            fontSize:'18px'
        }
    },
    grid: {
        top: '10%',
        left: '5%',
        bottom: '10%',
        right: '5%'
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00',
            '22:00', '24:00'
        ],
        axisLine: {
            lineStyle: {
                color: '#EDEDED'
            }
        },
        axisLabel: {
            color: '#999999',
            fontSize: '14px'
        }
    },
    yAxis: {
        type: 'value',
        axisLine: {
            show: false
        },
        axisLabel: {
            color: '#999999',
            fontSize: '14px'
        },
        splitNumber: 8,
        splitLine: {
            show: true,
            lineStyle: {
                type: 'dashed'
            }
        }
    },
    series: [{
        name: '成交',
        type: 'line',
        smooth: true,
        data: [0, 2, 3, 6, 5, 9, 14, 2, 3, 10, 2, 1, 0],
        symbol: 'none',
        lineStyle:{//線條樣式
            color:'#E5BC90'
        }
    }]
});
</script>