echarts 樣式配置 vue

時間 2019-11-09

標籤 echarts 樣式配置 vue 简体版

原文原文鏈接

vue使用實例

<template>
    <div style="width:100%;height:100%;" id="productStructureChart"></div>
</template>

<script>
    import echarts from 'echarts';
    export default {
        name: 'productStructureChart',
        data () {
            return {
                //
            };
        },
        mounted () {
            this.$nextTick(() => {
                let visiteVolume = echarts.init(document.getElementById('productStructureChart'));
                let xAxisData = [];
                let data1 = [];
                let data2 = [];
                for (let i = 0; i < 20; i++) {
                    xAxisData.push('類目' + i);
                    data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
                    data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5);
                }
                var colors = ['#5793f3', '#d14a61', '#675bba'];

                const option = {
                    title : {
                        // text: '某站點用戶訪問來源',
                        // subtext: '純屬虛構',
                        x:'center'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['成品','半成品','原料','輔料','設備配件']
                    },
                    series : [
                        {
                            name: '訪問來源',
                            type: 'pie',
                            radius : '55%',
                            center: ['50%', '60%'],
                            data:[
                                {value:335, name:'成品'},
                                {value:310, name:'半成品'},
                                {value:234, name:'原料'},
                                {value:135, name:'輔料'},
                                {value:1548, name:'設備配件'}
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                visiteVolume.setOption(option);

                window.addEventListener('resize', function () {
                    visiteVolume.resize();
                });
            });
        }
    };
</script>

座標軸間距

grid: {
    left: 90,    //Y軸距離左邊的距離
    right:60     //X軸距離右邊的距離
},

樣式設置


yAxis: {
    type: 'value',
    axisLine: {
        color:'blur',     //
        lineStyle: {
            type: 'solid',
            color: 'red',//y軸的顏色
            width:'11'//y座標軸線的寬度
        }
    },
    axisLabel: {
        textStyle: {
            color: 'red',//y座標軸的刻度值的顏色

        }
    },
    splitLine: {   分割線的顏色、類型：虛線和實線
        show: true,
        lineStyle:{
            color:'#3e4555',
            type:'solid'
        }
    }

},

折線的顏色

series: [
    {
        name:'上週',
        type:'line',
        stack: '總量',
        itemStyle : {
            normal : {
                color:'#025f64',  //圖例的icon圖標顏色
                lineStyle:{
                    color:'#05b0c2'    //折線的顏色
                }
            }
        },
        data:[120, 132, 101, 134, 90, 230, 210]
    }
]

圖例的字體顏色

legend: {
    data:['上週','當週'],
    textStyle: {
        color: '#a6bbcc'
    }
},

右上角的工具欄

toolbox: {
    feature: {
        saveAsImage: {
            show: true,                         //是否顯示該工具。
            type:"png",                         //保存的圖片格式。支持 'png' 和 'jpeg'。
            name:"pic1",                        //保存的文件名稱，默認使用 title.text 做爲名稱
            backgroundColor:"#ffffff",        //保存的圖片背景色，默認使用 backgroundColor，若是backgroundColor不存在的話會取白色
            title:"保存爲圖片",
            pixelRatio:1
        }
    },

    iconStyle:{
        color:'#fff',
        normal:{
            color:'#fff',//背景顏色
            borderColor: 'red'//邊框顏色

        }
    }

圖例legend

legend: {
    orient: 'horizontal',     // horizontal-->水平     vertical-->垂直
    x: 'center',     //X軸居中
    y: 'top',
    data:['細紗擋車','細紗掛紗','細紗換紗','細紗擺管','細紗落紗'],
    textStyle:{
        color:'#a7b9cd'
    }
},

刻度大小

min: 0,
max: 25000,
interval: 5000,

yAxis: [
    {
        type: 'value',
        name: '錠速',
        min: 0,
        max: 25000,
        interval: 5000,   //刻度間隔
        axisLabel: {
            formatter: '{value} m/min'
        },
        axisLine: {
            lineStyle: {
                type: 'solid',
                color: '#fff',//左邊線的顏色
                width:'1'//座標線的寬度
            }
        },splitLine: {
            show: true,
            lineStyle:{
                color:'#3e4555',
                type:'solid'
            }
        },
    },

]

座標軸指示器

tooltip: {
    trigger: 'axis',
    axisPointer: {
        type: 'cross',
        crossStyle: {
            color: '#999'
        }
    }
},

圖表距離兩側的距離

grid: {
  x: 90,
  x2: 66,
  y2: 40
},

雙摺線圖疊加的問題

series: [
    {
        name:'當週',
        type:'line',
        // stack: '總量',    //y軸的值會疊加，註釋掉就不會疊加了
        itemStyle : {
            normal : {
                color:'#03c4d5',
                lineStyle:{
                    color:'#05b0c2'
                }
            }
        },
        data:[20857.84168, 21159.75663, 21590.5474, 22968.84356, 0, 0, 0]
    },
    {
        name:'上週',
        type:'line',
        // stack: '總量',     //y軸的值會疊加，註釋掉就不會疊加了
        itemStyle : {
            normal : {
                color:'#025f64',
                lineStyle:{
                    color:'#005d65'
                }
            }
        },
        data:[20172.67505, 21714.04182, 11356.07937, 22980.75812, 22908.63532, 22373.94958, 22366.32426]
    },

雙y軸時，各圖表參照的y軸設置（yAxisIndex），從0開始

series: [    {        name:'錠速',        type:'line',        data:this.spindleSpeed,        yAxisIndex: 0,    //0表明左邊的y軸        axisLine: {            lineStyle: {                type: 'solid',                color: '#fff',//左邊線的顏色                width:'1'//座標線的寬度            }        },        splitLine: {            show: true,            lineStyle:{                color:'red',                type:'solid'            }        },        itemStyle : {            normal : {                color:'#01C4D6',                lineStyle:{                    color:'#01C4D6'                }            }        },    },    {        name:'定長',        type:'bar',        yAxisIndex: 1,  //1表明右邊的y軸        data:this.spindleLength,        itemStyle : {            normal : {                color:'#C23531',                lineStyle:{                    color:'#C23531'                }            }        },    }]