echarts案例

1. echarts参考地址:http://echarts.baidu.com/echarts2/doc/doc.html#Toolbox   

2. 要显示如下所示的图:

3. 数据数组: 

4. 相应的js代码

 //季度保费统计
        var quarterPremium = function(){
           finder.post("queryOverByYear", {}).then(
                function (data) {
   				  var year = '';
   				  var arrAmount=[];
                  angular.forEach(data,function(data1){
                  	if(year == data1.year){
           arrAmount[arrAmount.length - 1].data.push(Math.round(data1.amount/100)/100);
                  	}else{
                  		year = data1.year;
                  		var yearObj ={
					        	year:year,
					        	data:[]
					        };
                        //如果前几季度返回来空,就赋值为0                       
                        for(var i = 1; i < data1.quarter; i++){
                            yearObj.data.push(0);
                        }
                        yearObj.data.push(Math.round(data1.amount/100)/100);
		         arrAmount.push(yearObj);
                  	}


                 });
                  initLineChart(arrAmount);

                },function (err) {
                    //请求失败
                   // console.log(err)
                    layerMsg('查询失败请联系管理员');
                }
            );
        };

       //季度保费统计数据
	    var initLineChart = function(data){
	    	var ele = document.getElementById('premium_income');
            lineChartObj = echarts.init(ele);
            // 指定图表的配置项和数据
            var option = {
                color: [ '#E98F6F','#6AB0B8', '#334B5C'],
                title: {
                   text: '保费收入(万元)',
                   textStyle:{
                        fontSize : 14
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    //formatter: "{b} <br> 合格率: {c}%"
                },
                legend: {
                    data:[ ]
                },
                grid: {
                    top:'20%',
                    left: '5%',
                    right: '10%',
                    bottom: '5%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    name: '',
                    boundaryGap: false,
                    data: ['一季度','二季度','三季度','四季度']
                },
                yAxis: {
                    type: 'value',
                },
                series: [
                    {
                        name:data[0].year + '年',
                        type:'line',
                        stack: '总量1',
                        data:data[0].data

                    },
                    {
                        name:data[1].year + '年',
                        type:'line',
                        stack: '总量2',
                        data:data[1].data
                    },
                    {
                        name:data[2].year + '年',
                        type:'line',
                        stack: '总量3',
                        data:data[2].data
                    },

                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            lineChartObj.setOption(option);
	    };

          quarterPremium();//调用方法

 

### 关于 ECharts 示例项目与使用案例 ECharts 是一个基于 JavaScript 的开源可视化库,广泛用于数据可视化领域。以下是几个推荐的 ECharts 示例项目和使用案例: #### 官方示例项目 官方提供了丰富的示例供开发者学习和参考。可以通过以下链接访问完整的示例集合: - **Apache ECharts 示例项目**: 提供了一个详细的目录结构以及如何搭建项目的指南[^1]。 地址: https://gitcode.com/gh_mirrors/ec/echarts-examples #### 社区分享站点 除了官方资源外,还有多个由社区维护的 ECharts 示例网站可供参考: 1. **ECharts 作品集** 这是一个专注于展示高质量 ECharts 可视化作品的平台,适合寻找灵感或高级用法[^2]。 地址: http://chart.majh.top/ 2. **MCChart** MCChart 提供了大量的 ECharts 图表实例,涵盖了多种场景下的应用需求。 地址: https://echarts.zhangmuchen.top/#/index 3. **Made A Pie** Made A Pie 不仅提供现成的图表模板,还支持自定义创建并分享自己的可视化作品。 地址: https://madeapie.com/#/examples 4. **PPChart** PPChart 集成了许多实用的 ECharts 实例,特别适用于快速上手实践。 地址: https://ppchart.com/#/ #### 自定义功能增强 如果希望进一步提升用户体验,可以尝试以下配置方法: - 添加 `tooltip` 功能以便鼠标悬停时显示更详细的信息[^3]: ```javascript tooltip: { trigger: 'axis', axisPointer: { type: 'line' } } ``` - 修改折线图的颜色渐变效果以提高视觉吸引力: ```javascript series: [{ type: 'line', areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {offset: 0, color: '#83bff6'}, {offset: 0.5, color: '#188df0'}, {offset: 1, color: '#188df0'} ]) }, }] ``` 通过以上方式,能够显著改善图表的表现力。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值