首页 > 代码库 > ECharts官网实例

ECharts官网实例

2024-11-20 01:31:02   202人阅读

简介

ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>echart学习</title>
</head>
<body>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });

        //使用
        require(
        	[
        		'echarts',
        		'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
        		'echarts/chart/line'
        	],
        	function(ec){
        		 // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main')); 
                // 过渡---------------------
                myChart.showLoading({
                    text: '正在努力的读取数据中...',    //loading话术
                });
                myChart.hideLoading();
      option = {
    title : {
        text: '未来一周气温变化',
        subtext: '纯属虚构'
    },
    tooltip : {
       // trigger: 'axis'
       trigger:'item'
    },
    legend: {
        data:['最高气温','最低气温']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false}, //数据视图
            magicType : {show: true, type: ['line', 'bar']}, //动态类型切换,柱状折现切换
            restore : {show: true}, //重置
            saveAsImage : {show: true} //保存为图片
        }
    },
    calculable : true, //是否启用拖拽重计算特性，默认false
    xAxis : [
        {
            type : 'category',
            boundaryGap : false, // 坐标轴两端空白策略
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : [
        {
            type : 'value',
            axisLabel : {
                formatter: '{value} °C'
            }
        }
    ],
    series : [
        {
            name:'最高气温',
            type:'line',
            data:[11, 11, 15, 13, 12, 13, 10],
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
        },
        {
            name:'最低气温',
            type:'line',
            data:[1, -2, 2, 5, 3, 2, 0],
            markPoint : {
                data : [
                    {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name : '平均值'}
                ]
            }
        }
    ]
};
                // 为echarts对象加载数据 
                myChart.setOption(option); 
        	}
        	);	
       // }
    </script>
</body>
</html>

效果图

技术分享

ECharts官网实例


联系
我们