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'                }            }        },    }]

echarts 样式 配置 vue

echarts 样式配置 vue