echarts使用方法

来源：互联网发布：金融投资网络销售好吗编辑：程序博客网时间：2024/06/01 17:23

基本步骤：

1.去 echarts 官网下载 echarts 包，下载的同时查看官网文档API

2.创建项目，并在html中引入下载的js文件

3.先 init 一个图表实例，再 myChart.hideLoading()

4.ajax 取数剧，用数据拼装 option

5.myChart.setOption()

大致就这5个步骤，也有好多小细节

这是一个效果图根据自己的理解做的如有不对请评论指导

<!DOCTYPE html><html><head lang="en">    <meta charset="utf-8">    <title>ECharts</title></head><body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="height:400px;width: 600px"></div><!-- ECharts单文件引入 --><script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script><script type="text/javascript">    // 基于准备好的dom，初始化echarts图表    var myChart = echarts.init(document.getElementById("main"));    var arr = [11,12,12,12,12,12,15]    var option = {        title : {       //提示的标题            text: '这是一级大标题',            subtext: '这是二级小标题'        },        tooltip : {            trigger: 'axis'       //鼠标移入提示   none代表不提示   axis坐标轴触发  item数据项图形触发        },        legend: {       //做标记 控制显示区域  这里写控制的控件的名字            data:['显示最高气温','显示最低气温']        },        toolbox: {        //工具栏 可以导出图片 数据视图 动态类型切换 数据区域缩放 重置            show : true,      //是否显示本工具栏            orient : 'horizontal',  //工具栏的显示位置 默认    vertical为右边竖向            feature : {       //各工具配置项 可以自定义工具名字 不过只能以my开头                mark : {show: true},                dataView : {show: true, readOnly: false},                magicType : {show: true, type: ['line', 'bar']},                restore : {show: true},                saveAsImage : {show: true}            }        },        calculable : true,        xAxis : [     //直角坐标系grid中的x轴，一般情况下只能放两个 多于两个需要配置offset属性防止同位置的多个x轴的重叠            {                type : 'category',   //坐标轴的数据类型                 boundaryGap : false,  //坐标两边留白侧略 决定x轴的开始位置                data : ['周一','周二','周三','周四','周五','周六','周日']   //x轴的数据            }        ],        yAxis : [            {                type : 'value',                  axisLabel : {     //坐标轴设置                    formatter: '{value} °C'   //支持字符串拼接                }            }        ],        series : [       //系列列表 对应legend            {                name:'显示最高气温',                type:'line',                data: arr,    //[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}                        {type : 'min', name: '周最低'}                    ]                },                markLine : {                    data : [                        {type : 'average', name : '平均值'}                    ]                }            }        ]    };    myChart.setOption(option);           // 为echarts对象加载数据</script></body></html>

0 0