关于echarts折线图、柱状图简单封装的例子（附图）

最新推荐文章于 2024-05-21 20:58:30 发布

xxxxxxxxYZ

最新推荐文章于 2024-05-21 20:58:30 发布

阅读量1k

点赞数

分类专栏： echarts 文章标签： echarts

本文链接：https://blog.csdn.net/xxxxxxxxYZ/article/details/96483364

版权

echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

echarts官方配置项手册

echarts插件下载

ecStat.min.js是线性趋势变化（图中蓝色虚线）所需要引用的js

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>echarts折线图</title>
    <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="echarts/echarts.js"></script>
    <script type="text/javascript" src="echarts/ecStat.min.js"></script>
    <script type="text/javascript" src="chart.js"></script>
</head>
<style type="text/css">
    .tuCon{
        width: 400px;
        height: 400px;
        float: left;
    }
</style>
<body>
    <div class="bianHuaTu">
        <div class="bianHuaTuCon cont">
            <div class="zheXianTu" id="zheXianTu">
                <div class="tit" id="zhexian">年平均变化折线图
                </div>
                <div class="zheXianCon tuCon" id="zheXianCon">
                </div>
            </div>
            <div class="zhuZhuangTu" id="zhuZhuangTu">
                <div class="tit" id="zhuzhuang">年平均变化柱状图
                </div>
                <div class="zhuZhuangCon tuCon" id="zhuZhuangCon">
                </div>
            </div>
        </div>

    </div>
</body>
</html>
<script type="text/javascript">
    $(function(){
        var tasArray =[45,67,90,20,10,24,15,81];
        var yearArray = [1994,1995,1996,1997,1998,1999,2000,2001];
        var maxTas = Math.max.apply(Math,tasArray);//y轴最大值
        var minTas = Math.min.apply(Math,tasArray);//y轴最小值
        var dataNameLine = "河北省指数变化折线图";
        var dataNameBar = "河北省指数变化柱状图";
        makeChart("zheXianCon",maxTas,minTas,tasArray,yearArray,"line",'yaosu',dataNameLine,false,false);
        makeChart("zhuZhuangCon",maxTas,minTas,tasArray,yearArray,"bar",'yaosu',dataNameBar,false,false);
    })
</script>

chart.js:


//防止出现“There is a chart instance already initialized on the dom.”的警告    
//在使用echarts发现需要及时对新建的myChart实例进行销毁,否则会出现上述警告 
var _myChart={};
/**
 * 调用echart绘制统计图 chartId chart的div的id maxTas 统计图y轴最大值 minTas 统计图y轴最小值 tasArray
 * 统计图x轴数据数组 yearArray 统计图y轴数据数组 chartType 统计图图表类型：line是折线图，bar是柱状图
 * imageName：下载图片名称 axisName y轴坐标轴名称 markLineValue 标示线（常年值）
 */
 function makeChart(chartId, maxTas, minTas, tasArray, yearArray, chartType, imageName,axisName,markLineValue) {
    $('#' + chartId).css({
        width : $('#' + chartId).width() + 'px',
        height : $('#' + chartId).height() + 'px'
    });

    var echartsWarp = document.getElementById(chartId);
    var chartCanvas = $("#"+chartId).html();
    if(chartCanvas.trim().length>0 && _myChart[chartId]!=null && _myChart[chartId]!="" && _myChart[chartId]!=undefined){
        _myChart[chartId].dispose();//销毁存在的实例
    }
    _myChart[chartId] = echarts.init(echartsWarp);

    var arrSeries = [];
    //线性趋势
    var data = [];          
    for (var i = 0; i < yearArray.length; i++) {
        data.push([Number(yearArray[i]),Number(tasArray[i])]);
    }
    var myRegression = ecStat.regression('linear', data);
    for(var i=0;i<myRegression.points.length;i++){
        var point=myRegression.points[i];
        point[1]=point[1].toFixed(2);
    }
    arrSeries.push({
        name : '年平均值',
        type : chartType,
        // color : '#ff0000',
        markLine : {
            data :  [{
                name : '常年值',
                yAxis : markLineValue
            }]
        },
        smooth : false,
        data : data
    }
    ,{//线性变化趋势
        name: '线性变化',
        type: 'line',
        color:'#001fff',
        itemStyle:{
            normal:{
                lineStyle:{
                    width:2,
                    type:'dashed'
                }
            }
        },
        showSymbol: false,
        smooth:true,
        data: myRegression.points
    });
    var option = {
        title : {
            x : 'center',
            textStyle : {
                fontSize : 12,
                fontWeight : 'bolder',
                color : '#151589'
            },
            left:'left'
        },
        tooltip : {
            trigger : 'axis'
        },
        legend: {
            y:4,
            itemGap:20,
            selectedMode: 'multiple',
            textStyle : {
                fontSize : 16,
                color : '#000000'
            },
        },
        toolbox : {
            show : true,
            top : 0,
            right : 20,
            feature : {
                saveAsImage : {
                    show : true,
                    iconStyle : {
                        borderColor : '#dd8f56',
                    },
                    name : imageName
                }
            }
        },
        grid : {
            show:true,
            left:64,
            top:27,
            right:50,
            bottom:45,
            borderColor:'#000100'
        },
        xAxis : {
            show : true,
            type : 'category',
            name: '年份',
            nameLocation: 'middle',
            nameGap: 24,
            nameTextStyle:{
                fontSize:16
            },
            axisTick : {
                inside : true
            },
            axisLabel : {
                textStyle : {
                    color : '#000000',
                    fontSize: 16
                }
            },
            splitLine : {
                show : true,
                lineStyle : {
                    color : '#eeeeee'
                }
            },
            axisLine : {
                lineStyle : {
                    color : '#000000',
                    width : 2,
                    type : 'solid'
                }
            }
        },
        yAxis : {
            min : minTas,
            max : maxTas,
            name: axisName,
            nameLocation: 'middle',
            nameRotate: 90,
            nameGap: 48,
            axisLabel : {
                textStyle : {
                    color : '#000000',
                    fontSize: 16
                }
            },
            splitLine : {
                show : true,
                lineStyle : {
                    color : '#eeeeee'
                }
            },
            type : 'value',
            axisLine : {
                lineStyle : {
                    color : '#000000',
                    width : 2,
                    type : 'solid'
                }
            }
        },
        series : arrSeries
    };
    _myChart[chartId].setOption(option);
}

效果如下：

xxxxxxxxYZ

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于echarts折线图、柱状图简单封装的例子（附图）

echarts官方配置项手册echarts插件下载ecStat.min.js是线性趋势变化（图中蓝色虚线）所需要引用的jshtml：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>echarts折线图<...
复制链接

扫一扫

专栏目录