欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

图形报表echarts的使用1--折线图 博客分类: 图形报表echarts echarts折线图 

程序员文章站 2024-03-20 09:03:16
...

ECharts,缩写来自Enterprise Charts,商业级数据图表,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。

1、为ECharts准备一个具备大小(宽高)的Dom。
    <div id="chart" style="height: 800px; width: 980px;"></div>
2、新建<script>标签引入模块化单文件echarts.js
    <script src="${ctx}/resources/echarts/echarts.js"></script>
3、新建<script>标签中为模块加载器配置echarts和所需图表的路径(相对路径为从当前页面链接到echarts.js)
 // 路径配置
require.config({
    paths: {
        echarts: '${ctx}/resources/echarts'   //echarts类库的根路径
    }
});
4、<script>标签内动态加载echarts和所需图表,回调函数中可以初始化图表并驱动图表的生成
 // 使用
require(
    [
        'echarts',
        'echarts/chart/line',// 使用柱状图就加载line模块,按需加载
        'echarts/chart/bar'  // 使用柱状图就加载bar模块,按需加载
    ],
    requireCallback    //回调函数
);

//ec参数
function requireCallback (ec) {
    echarts = ec;
    myChart = echarts.init(document.getElementById('chart'));// 图表初始化的地方,在页面中要有一个地方来显示图表,他的ID是main 
    myChart.setOption(option); //显示图形 
}

option = {
            title : {--标题
                text : '组合图',
                textStyle:{ --文本样式
                        fontSize:18,
                    fontWeight: 'bolder',
                    color: '#000000'
                },  
                subtext:'${title}',--子标题
                subtextStyle:{  --子标题样式
                    fontSize: 14,
                    fontWeight: 'bolder',
                    color: '#ff0000'
                },
                x: "center", //标题水平方向位置
                y:'top'      //放置在上面
            },
            tooltip : { --气泡提示配置
                trigger: 'axis'
            },
             toolbox: {--右上角是否显示
                show : true,
            feature : {
                mark : {show: false},
                dataView : {show: true, readOnly: true},--是否显示数据及设置只读属性
                magicType : {show: true, type: ['line', 'bar']},--图例类型,这里的集合包含在配置使用的加载类库中
                restore : {show: true},
                saveAsImage : {show: true}--是否显示保存图片
            }
            },
            legend: {--图例配置
                data:['组合','组合1','组合2','组合3'],
                y:'bottom'
            },
            calculable : false, //是否启用拖拽重计算特性(********true的话,折线较宽 折线的宽带有差异)
            xAxis : [
                {
                    type : 'category',坐标轴类型,横轴默认为类目轴,数值轴则参考yAxis说明
                    boundaryGap : false,//坐标轴两端空白策略,数组内数值代表百分比
                    data : ${datesCharts},
                    name : '日期'
                }
            ],
            yAxis : [
                {
                    axisLabel : {
                        formatter: function (value) {
                            return value + '%';
                        }
                    },
                    type : 'value',//坐标轴类型,纵轴默认为数值轴,类目轴则参考xAxis说明
                    name : '收益'
                    //boundaryGap : false,//坐标轴两端空白策略,数组内数值代表百分比
                    //boundaryGap : [0.9,0.5],
                    //,splitNumber: 4   // 数值轴用,分割段数,默认为5
                }
            ],
            series : [
                {
                    name:'组合',// 系列名称
                    type:'line',// 图表类型,折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
                    //stack: '总量', //堆积 总量的统计
                    itemStyle: {
                        normal: {
                            label : {show: false, position: 'left'}, //在坐标轴交叉的地方是否显示值,及显示的位置
                            color:'#cbccb2',
                            lineStyle: {        // 系列级个性化折线样式
                                width: 2,
                                type: 'dotted'
                            }
                            }
                    },
                    data:${totalRevenueCharts1}
                },
                {
                    name:'组合1',
                    type:'line',
                    //stack: '总量',
                    itemStyle: {normal: {
                        label : {show: false, position: 'left'},
                        color:'#ff0000',
                        lineStyle: {        // 系列级个性化折线样式
                            width: 2,
                            type: 'solid'
                        }
                    }},
                    data:${manCangCharts}
                }
                ,
                {
                    name:'组合2',
                    type:'line',
                    //stack: '总量',
                    itemStyle: {normal: {
                        label : {show: false, position: 'left'},
                        color:'#00cc00',
                        lineStyle: {        // 系列级个性化折线样式
                            width: 2,
                            type: 'dashed'
                        }
                    }},
                    data:${kongCangCharts}
                },
                {
                    name:'组合3',
                    type:'line',
                    //stack: '总量',
                    itemStyle: {
                        normal: {
                            label : {show: false, position: 'left'},
                            color:'#0000ff'
                        }
                        /*, --在饼状图下有效
                        emphasis: {
                            label: {
                                show: true,
                                position: 'outer'
                            },
                            labelLine: {
                                show: true,
                                lineStyle: {
                                    color: 'red'
                                }
                            }
                        }*/
                    },
                    data:${shangzhengCharts}
                }
            ]
        };
               
效果图:

图形报表echarts的使用1--折线图
            
    
    博客分类: 图形报表echarts echarts折线图 
 

  • 图形报表echarts的使用1--折线图
            
    
    博客分类: 图形报表echarts echarts折线图 
  • 大小: 229.4 KB
相关标签: echarts 折线图