echar图表titile,x轴,y轴样式

在这里插入图片描述效果

前后端不分离 ,没有用脚手架
HTML

 <div id="ecLine" :style="{width: '49.5%', height: '310px'}"></div>
 <div id="zhLine" :style="{width: '49.5%', height: '310px'}"></div>

JS

 methods: {
        //echar图
        drawLine() {
            // 基于准备好的dom,初始化echarts实例
            var myChart1 = echarts.init(document.getElementById('ecLine'));
            var myChart2 = echarts.init(document.getElementById('zhLine'));
            // 绘制图表
            myChart1.setOption({
                title:{text:'当日趋势图',
                //标题样式
                    textStyle:{
                        color:'#000',        //颜色
                        fontStyle:'normal',     //风格
                        fontWeight:'normal',    //粗细
                        fontFamily:'Microsoft yahei',   //字体
                        fontSize:16,     //大小
                        align:'center',   //水平对齐
                        lineHeight:50

                    },
               //     title位置
               padding:[20, 0, 20, 30]
                },
                grid:{          //显示数据的图表位于当前canvas的坐标轴
                    x:50,
                    y:80,
                    borderWidth:1,

                },
                //悬浮显示
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#fff'
                        }
                    }
                },
                //折点提示
                legend: {
                    data:['异常台数'],
                    //折点提示位置
                    left:'90%',
                    top:'5%'
                },

                xAxis: {
                    type: 'category',
                    data: ['20190824', '20190825', '20190826', '20190827', '20190828', '20190829', '20190830'],
                    //轴颜色
                    axisLine: {
                        lineStyle: {
                            color: '#999'
                        }
                    },
                //    去除分割线
                    splitLine:{
                        show:false
                    },
                    axisTick:{
                        show:false
                    },
                },

                yAxis: {
                    name:'台数',
                    nameTextStyle:{
                        padding: [0,0,0,-20],
                        color:'#999999'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#999'
                        }
                    },
                    //去除分割线
                    axisTick:{
                        show:false
                    },
                    type: 'value',
                    //取消y轴网格
                    interval: 5,
                    min:0,
                    max:20,
                    scale: true,
                    show:true,
                    splitLine:{
                        show:false
                    },


                },
                series: [
                    {
                        name:'异常台数',
                        type:'line',
                        stack: '总量',
                        color:'#fccd35',
                        data:[5, 15, 12, 10, 9, 16, 14]
                    },
                    {
                    //    设置实心点大小
                    symbolSize: 8,
                    itemStyle : {
                        normal : {
                            color: "#fccd35",
                            lineStyle:{
                                color:'#fccd35'
                            }
                        }
                    },

                    data: [5, 15, 12, 10, 9, 16, 14],
                    type: 'line'
                }]
            });
            myChart2.setOption({
                title: {text: '本月累计趋势图',
                    textStyle:{
                        color:'#000',        //颜色
                        fontStyle:'normal',     //风格
                        fontWeight:'normal',    //粗细
                        fontFamily:'Microsoft yahei',   //字体
                        fontSize:16,     //大小
                        align:'center',   //水平对齐
                        lineHeight:50

                    },
                    //     title位置
                    padding:[20, 0, 20, 30]
                },
                legend: {
                    data:['环比',],
                    //折点提示位置
                    left:'85%',
                    top:'5%'
                },
                grid:{          //显示数据的图表位于当前canvas的坐标轴
                    x:50,
                    y:80,
                    borderWidth:1,

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

                xAxis : [
                    {
                        type : 'category',
                        data : ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月'],
                        axisLine: {
                            lineStyle: {
                                color: '#999'
                            }
                        },
                        axisTick:{
                            show:false
                        },
                    },


                ],
                yAxis : [

                    {
                        type : 'value',
                        max: 90,
                        name:'台数',
                        interval: 30,
                        scale: true,
                        show:true,
                        splitLine:{
                            show:false
                        },
                        axisTick:{
                            show:false
                        },
                        nameTextStyle:{
                            padding: [0,0,0,-20],
                            color:'#999999'
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#999'
                            }
                        },
                    },
                    {

                        type: 'value',
                        // name: '温度',
                        min: 0,
                        max:100,
                        //取消y轴网格
                        interval: 25,
                        scale: true,
                        show:true,
                        splitLine:{
                            show:false
                        },
                        axisTick:{
                            show:false
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#999'
                            }
                        },
                    }
                ],
                series : [
                    {
                        name:'环比',
                        type:'line',
                        stack: '总量',
                        color:'#fccd35',
                        symbolSize: 8,
     
                        yAxisIndex: 1,
                        data:[30, 15, 42, 65, 38, 40, 78,50]
                    },

                    {
                        name:'柱状图',
                        type:'bar',
                        //柱状图宽度
                        barWidth: '13%',
                        data:[55,56,40,59,45,23,12,16],
                        itemStyle:{
                            normal:{
                                color:'#84d1d3'
                            }
                        },
                    },



                ],

            });
        },
        //分页
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }
    }

一表多图

  series : [
                    {
                        name:'环比',
                        type:'line',
                        stack: '总量',
                        color:'#fccd35',
                        symbolSize: 8,
                        //按右边y轴显示
                        yAxisIndex: 1,
                        data:[30, 15, 42, 65, 38, 40, 78,50]
                    },

                    {
                        name:'柱状图',
                        type:'bar',
                        //柱状图宽度
                        barWidth: '13%',
                        data:[55,56,40,59,45,23,12,16],
                        itemStyle:{
                            normal:{
                                color:'#84d1d3'
                            }
                        },
                    },



                ],
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值