echarts 折现图和柱状图 样式修改 设置折线样式 背景

时间:2024-03-15 21:44:49

1、设置折线图样式(修改后)(背景竖条纹间隔,去掉边框,设置折线和节点颜色,设置数据字体颜色)

echarts 折现图和柱状图 样式修改 设置折线样式 背景

设置折线样式:

echarts 折现图和柱状图 样式修改 设置折线样式 背景

设置折线图的背景样式:

echarts 折现图和柱状图 样式修改 设置折线样式 背景

2.设置柱状图样式(修改后)

echarts 折现图和柱状图 样式修改 设置折线样式 背景

设置柱子的样式

echarts 折现图和柱状图 样式修改 设置折线样式 背景

设置柱状图背景

echarts 折现图和柱状图 样式修改 设置折线样式 背景

完整代码:

 // 路径配置
    require.config({
        paths: {
            echarts: 'http://echarts.baidu.com/build/dist'
        }
    });

    // 使用
    require(
            [
                'echarts',
                'echarts/chart/line',//折线图
                'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载
            ],
            function (ec) {
                // 基于准备好的dom,初始化echarts图表
                var myChart = ec.init(document.getElementById('ttnEcharts'));

                option = {
                    // title: {
                    //     text: '折线图堆叠'
                    // },
                    
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['地温','历史地温均值']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true,
                        borderWidth:'0'
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis:
                            [
                                {
                                    type: 'category',
                                     splitLine:{show: false},//去除网格线
                                    // boundaryGap: false,
                                    borderWidth:0,
                                    borderColor:'#FFFFFF',
                                    data:['04-16', '04-17', '04-18', '04-19', '04-20', '04-21', '04-22', '04-23']
                                    ,
                                    splitArea:
                                    {
                                        show:true,
                                        areaStyle:
                                        {
                                             
                                             color:[
                                                 'rgba(100, 100, 100, 0.03)',
                                                 'rgba(100, 100, 100, 0)'
                                             ],
                                           /* shadowBlur:{
                                                shadowColor: 'rgba(100, 100, 100, 0.5)'

                                            },*/
                                        }
                                    }
                                }
                            ],
                    yAxis: {
                        type: 'value',                        
                        show:false
                    },
                    series: [
                        
                        {
                            name:'地温',
                            // type:'line',
                            // stack: '总量',
                            type: 'line',
                            smooth: true,
                           itemStyle : { normal: {label : {show: true, position: 'bottom',textStyle:{color:'#000000'}},color:'#ebe800',lineStyle:{
                                        color:'#ebe800'
                                    }}},
                            data:[21.63, 17.06, 21.29, 22.66, 21.14, 12.97, 24.04, 23.42]
                        },
                        {
                            name:'历史地温均值',
                            type:'line',
                            stack: '总量',
                          itemStyle : { normal: {label : {show: true, position: 'top',textStyle:{color:'#000000'}},color:'#00e4ff',lineStyle:{
                                        color:'#00e4ff'
                                    }}},
                            data:[21.42, 19.56, 24.21, 25.42, 24.6, 17.89, 23.49, 21.18]
                        }
                    ]
                };
                // 为echarts对象加载数据
                myChart.setOption(option);


                var myChartTrmm = ec.init(document.getElementById('trmmEcharts'));

                var  option = {
                    grid: {show:'true',borderWidth:'0'},
                    legend: {
                        data:['降雨量mm','历史雨量均值mm']
                    },
                    xAxis: [
                        {
                            type: 'category',
                            splitLine:{show: false},//去除网格线
                            data: ['04-16', '04-17', '04-18', '04-19', '04-20', '04-21', '04-22', '04-23'],
                            axisPointer: {
                                type: 'shadow'
                            } ,
                            splitArea:
                            {
                                show:true,
                                areaStyle:
                                {
                                    color:[
                                            'rgba(100, 100, 100, 0.03)',
                                            'rgba(100, 100, 100, 0)'
                                        // 'rgba(123,19,19,0.3)',
                                        // 'rgba(100,100,100,0.3)'
                                    ]
                                }
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '水量',
                            show:false,
                            min: 0,
                            max: 17.21,
                            interval: 50,
                            axisLabel: {
                                formatter: '{value} ml'
                            }
                        }
                    ],
                    series: [
                        {
                            name:'降雨量mm',
                            type:'bar',
                            itemStyle : { normal: {color:'#46b9f7',label : {show: true, position: 'top',textStyle:{color:'#000000'}} }},
                            data:[7.18, 0.1, 0.3, 2.89, 7.54, 5.72, 0.44, 0.15]
                        },
                        {
                            name:'历史雨量均值mm',
                            type:'bar',
                            itemStyle : { normal: {color:'#00e787',label : {show: true, position: 'top',textStyle:{color:'#000000'}} }},
                            data:[3.45, 4.06, 4.56, 5.04, 5.09, 7.21, 6.21, 2.91]
                        }
                    ]
                };

                // 为echarts对象加载数据
                myChartTrmm.setOption(option);
            }
    );