echarts首次使用总结

最新推荐文章于 2022-03-27 19:02:29 发布

Silence-Lee

最新推荐文章于 2022-03-27 19:02:29 发布

阅读量344

点赞数

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

本文链接：https://blog.csdn.net/chenxi_li/article/details/96840334

版权

echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在这里插入图片描述

1 前提步骤

1.1 图中图表的html部分

<div class="graph">
    <div class="graph1">
        <div id="graph11"></div>
        <div id="graph12"></div>
        <div id="graph13"></div>
    </div>
    <div class="graph2">
        <div id="my_map"></div>
        <div class="graph22">
            <table data-toggle="table" ><!--data-url="data1.json"-->
                <thead>
                <tr>
                    <th>序号</th>
                    <th>订单编号</th>
                    <th>组网名称</th>
                    <th>产品类型</th>
                    <th>订单类型</th>
                    <th>订单金额</th>
                    <th>订单时间</th>
                    <th>订单状态</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

1.2 引入echarts文件

<script type="text/javascript" src="lib/echarts.min.js" ></script>
<script type="text/javascript" src="lib/china.js" ></script><!--中国地图需要用到-->

2、bar柱状图（条形图）

2.1 init初始化图形标签

let myChart1 = echarts.init(document.getElementById('graph11'));

2.2 配置项options

配置项包括配置title、legend、xAxis、yAxis、grid、series及背景色backgroundColor等。

let options = {
      // backgroundColor:'rgba(128, 128, 128, 0.5)', //rgba设置透明度0.1
     //定义一个标题
     title: {
         text: 'CPU、Mem分布统计',
         textStyle: { /*标题样式*/
             fontSize: "100%",
             fontWeight: 'normal',
             color: '#000'
         },
         x: 'left'/*center  left right */
     },
     legend: {/*图例*/
         data: ['CPU', "Mem"],
         type: 'scroll',
         // orient: 'vertical',/*horizontal水平 vertical垂直*/
         itemWidth:20,/*图例形状的宽*/
         itemHeight:8,/*图例形状的高*/
         left:"15%",
         right:"30%" ,
         top: "15%" ,
     },
     xAxis: {
         // data: ['60分', '70分', '80分', '90分', '100分'],
         data: [],
         name:"利用率（%）",//坐标轴名称。
         nameLocation:'end',//坐标轴名称显示位置。
     },
     yAxis: {
         type: 'value',
         splitNumber:1,
         // min: 10,
         max: 700,
         axisLine: {
             show: true
         },
         axisTick: {
             show: false
         },
         axisLabel: {
             interval:0,
             // rotate:"45",/*旋转45°*/
             // inside: true,
             textStyle: {
                 // color: 'red'
             }
         },
     },
     grid:{//直角坐标系内绘图网格
         // show:true,//是否显示直角坐标系网格。[ default: false ]
         left:"15%",//grid 组件离容器左侧的距离。
         right:"30%",
         borderColor:"#c45455",//网格的边框颜色
         bottom:"15%" //
     },
     //name=legend.data的时候才能显示图例
     series: [{
         name: 'CPU',
         type: 'bar',
         // data: [200, 312, 431, 241, 175, 275, 369],
     }, {
         name: 'Mem',
         type: 'line',/*或者bar*/
         // data: [321, 432, 543, 376, 286, 298, 400],
     }]
 }

2.3 配置setOption

//每次窗口大小改变的时候都会触发onresize事件，这个时候我们将
// echarts对象的尺寸
// 赋值给窗口的大小这个属性，从而实现图表对象与窗口对象的尺寸一致的情况
// window.onresize = myChart.resize;
myChart1.setOption(options);

3 盒子WAN宽带利用率分布统计

3.1 init初始化

let myChart2 = echarts.init(document.getElementById('graph12'));

3.2 配置项及其配置setOption

根据Simple Encode案例修改。

myChart2.setOption({
    dataset: {
        source: [
            ['利用率（%）', 'product'],
            [0, '100.88.0.14'],
            [0, '100.88.0.13'],
            [0, '100.88.0.16'],
            [0, '100.88.0.12'],
            [40, '100.88.0.1'],
        ]
    },
    //定义一个标题
    title: {
        text: '盒子WAN带宽利用率分布统计',
        textStyle: { /*标题样式*/
            fontSize: "100%",
            fontWeight: 'normal',
            color: '#000'
        },
        x: 'left'/*center  left right */
    },
    xAxis: {
        // data: [],
        name:"利用率(%)",//坐标轴名称。
        nameLocation:'end',//坐标轴名称显示位置。
        max:50,
    },
    yAxis: {
        type: 'category',
        axisLabel: {
            interval:0, /*强制让所有的刻度标识都显示*/
            // rotate:"45",/*旋转45°*/
            // inside: true,
            textStyle: {
                // color: 'red'
            }
        },
    },
    grid:{//直角坐标系内绘图网格
        containLabel: true,
        // show:true,//是否显示直角坐标系网格。[ default: false ]
        left:"1%",//grid 组件离容器左侧的距离。
        right:"25%",
        // borderColor:"#c45455",//网格的边框颜色
        top:"20%",
        bottom:"10%", //
    },
    // visualMap: {
    //     orient: 'horizontal',
    //     left: 'center',
    //     min: 10,
    //     max: 100,
    //     text: ['High Score', 'Low Score'],
    //     // Map the score column to color
    //     dimension: 0,
    //     inRange: {
    //         color: ['#D7DA8B', '#E15457']
    //     }
    // },
    series: [
        {
            type: 'bar',
            encode: {
                // Map the "amount" column to X axis.
                x: '利用率（%）',
                // Map the "product" column to Y axis
                y: 'product'
            },
            itemStyle: {
                normal: {color: '#68ff1b'}
            },
        }
    ]
})

4 pie饼状图

4.1 init

let myPie = echarts.init(document.getElementById('graph13'));

数据准备：

let myPieData = [
    {value: 235, name: '0-50ms', itemStyle: {color: '#00CED1'}},
    {value: 274, name: '50-100ms', itemStyle: {color: '#9ACD32'}},
    {value: 310, name: '100ms以上', itemStyle: {color: '#FFC0CB'}},//设置某个扇形颜色
]

4.2 配置项及其配置setOption

title、tooltip、legend、series、itemStyle

myPie.setOption({
    // backgroundColor:'#fff',
    //定义一个标题
    title: {
        text: '隧道性能分布统计',
        textStyle: { /*标题样式*/
            fontSize: "100%",
            fontWeight: 'normal',
            color: '#000'
        },
        x: 'left',/*center  left right */
    },
    // avoidLabelOverlap: false,
    tooltip:{
        trigger:"item",
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    // color: ['#00CED1', '#9ACD32', '#FFC0CB'],
    // stillShowZeroSum: false,
    legend: {  /*图例*/
        type: 'scroll',
        orient: 'vertical',
        right:"0" ,// right:"5%" , // x : 'left',
        top: "25%" ,// top:40,
        // bottom: "20%",

        itemWidth:20,/*图例形状的宽*/
        itemHeight:8,/*图例形状的高*/
        data: myPieData.name,
        // icon:'circle',/*t图例的形状：圆形*/
        textStyle:{
                    // fontSize:'50%',/*图例字体大小 可以是百分比、一个数值*/
                    // color:"#EA5504",/*图例的字体颜色*/
                    // padding:10,/*图例之间的距离*/
        },
        formatter: function (name) {/*当文字大于8个字符的时候，之后的字符显示"..."*/
            return (name.length > 8 ? (name.slice(0,8)+"...") : name );
        },
    },
    series: [{
        name: '访问来源',
        type: 'pie',
        // roseType: 'angle',
        //          roseType: 'angle'------表示有层次感
        radius: '55%',   /*radius: ['50%', '70%'], 两个数值环状形，一个数值饼状图*/
        center: ['35%', '60%'],/*图的位置*/
        label: {
            normal: {
                show: false,  //直接显示各个扇形名称，默认为true
                position: 'inner',/*center */
                formatter: '{d}',/*让它显示百分比，不是名称*/
                fontSize: 7,  /*里面的字体大小*/
            },
            emphasis: {
                // show: true,  //为真时鼠标放上去则显示具体扇形信息，默认为false
                textStyle: {/*上面为true时下面才会看到效果*/
                    fontSize: '15',
                    fontWeight: 'bold'
                }
            }
        },
        data: myPieData,
    }],
    itemStyle: {
        /*整个图形区域的阴影*/
        shadowBlur: 200,   // 阴影的大小
        shadowOffsetX: 0, // 阴影垂直方向上的偏移
        shadowOffsetY: 0,  // 阴影水平方向上的偏移
        shadowColor: 'red', // 阴影颜色
        color: '#c23531',//图形颜色，若前面没有设置，则默认为该颜色
    }
});

5 中国地图

5.1 init及数据准备

//初始化echarts实例
let myMap = echarts.init(document.getElementById('my_map'));

function randomData() {  /*写入随机数来测试数据：*/
    return Math.round(Math.random() * 500);
}
let mydata = [
    {name: '北京', value: '100'}, {name: '天津', value: randomData()},
    {name: '上海', value: randomData()}, {name: '重庆', value: randomData()},
    {name: '河北', value: randomData()}, {name: '河南', value: randomData()},
    {name: '云南', value: randomData()}, {name: '辽宁', value: randomData()},
    {name: '黑龙江', value: randomData()}, {name: '湖南', value: randomData()},
    {name: '安徽', value: randomData()}, {name: '山东', value: randomData()},
    {name: '新疆', value: randomData()}, {name: '江苏', value: randomData()},
    {name: '浙江', value: randomData()}, {name: '江西', value: randomData()},
    {name: '湖北', value: randomData()}, {name: '广西', value: randomData()},
    {name: '甘肃', value: randomData()}, {name: '山西', value: randomData()},
    {name: '内蒙古', value: randomData()}, {name: '陕西', value: randomData()},
    {name: '吉林', value: randomData()}, {name: '福建', value: randomData()},
    {name: '贵州', value: randomData()}, {name: '广东', value: randomData()},
    {name: '青海', value: randomData()}, {name: '西藏', value: randomData()},
    {name: '四川', value: randomData()}, {name: '宁夏', value: randomData()},
    {name: '海南', value: randomData()}, {name: '台湾', value: randomData()},
    {name: '香港', value: randomData()}, {name: '澳门', value: randomData()}
];

5.2 配置项及其配置setOption

/*自己的数据写入value里  实例化option，配置属性，data置入数据*/
let optionMap = {
    backgroundColor: '#FFFFFF',
    title: {
        text: '全国地图大数据',
        subtext: '',
        x: 'center'
    },
    tooltip: {
        trigger: 'item'
    },

    //左侧小导航图标
    visualMap: {
        show: true,
        x: 'left',
        y: 'center',
        splitList: [
            {start: 500, end: 600}, {start: 400, end: 500},
            {start: 300, end: 400}, {start: 200, end: 300},
            {start: 100, end: 200}, {start: 0, end: 100},
        ],
        color: ['#5475f5', '#9feaa5', '#85daef', '#74e2ca', '#e6ac53', '#9fb5ea']
    },

    //配置属性
    series: [{
        name: '我的数据',
        type: 'map',
        mapType: 'china',
        roam:true,  /*地图是否可缩放或移动位置*/
        label: {
            normal: {
                // show: true  //直接显示省份名称
            },
            emphasis: {
                show: false
            }
        },
        data: mydata  //数据
    }]
};

//使用制定的配置项和数据显示图表
myMap.setOption(optionMap);

6 多个图表同时响应屏幕尺寸变化解决方法

// 有多个图表的时候，在var option = {}后面加上这样的一段代码即可，图表会随着显示屏幕尺寸大小改变而改变。
window.onresize = function () {
    myChart1.resize();
    myChart2.resize();
    myPie.resize();
    myMap.resize();
};

7 ajax获取后台服务器数据并将数据渲染到页面中去

7.1 初始页面准备

以饼状图为例，先将饼状图中的数据都初始化为空，然后再通过获取服务器数据来填充这些初始化的数据

let myPie = echarts.init(document.getElementById('graph13'));
//使用制定的配置项和数据显示图表

let option3 = {
    // backgroundColor:'#fff',
    title: {
        text: '隧道性能分布统计',
        textStyle: { /*标题样式*/
            fontSize: "100%",
            fontWeight: 'normal',
            color: '#000'
        },
        x: 'left',/*center  left right */
    },
    tooltip:{
        trigger:"item",
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {  /*图例*/
        type: 'scroll',
        orient: 'vertical',
        right:"0" ,// right:"5%" , // x : 'left',
        top: "25%" ,// top:40,

        itemWidth:20,/*图例形状的宽*/
        itemHeight:8,/*图例形状的高*/
        // data: myPieData.name,
        data: '', //初始化为空
    },
    series: [{
        name: '访问来源',
        type: 'pie',
        // roseType: 'angle', //------表示有层次感
        radius: '55%',   /*radius: ['50%', '70%'], 两个数值环状形，一个数值饼状图*/
        center: ['35%', '60%'],/*图的位置*/
        label: {
            normal: {
                show: false,  //直接显示各个扇形名称，默认为true
                position: 'inner',/*center */
                formatter: '{d}',/*让它显示百分比，不是名称*/
                fontSize: 7
            },
            emphasis: {
                show: true,  //为真时鼠标放上去则显示具体扇形信息，默认为false
                textStyle: {/*上面为true时下面才会看到效果*/
                    fontSize: '14',
                    fontWeight: 'bold'
                }
            }
        },
        // data: myPieData,
        data: [],//初始化为空
    }],
    itemStyle: {
        /*整个图形区域的阴影*/
        // shadowBlur: 200,   // 阴影的大小
        shadowOffsetX: 0, // 阴影垂直方向上的偏移
        shadowOffsetY: 0,  // 阴影水平方向上的偏移
        shadowColor: 'red', // 阴影颜色
        color: '#c23531',//图形颜色，若前面没有设置，则默认为该颜色
    }
};
myPie.setOption(option3);  //setOption可多次使用

7.2 使用jQuery封装的ajax来获取数据(post方式)

前言：这里在使用ajax中的数据时是在它内部使用的，并没有将它的数据拿到它外部去使用。
从服务器拿来的数据ajax内，然后将setOption写在里面，重新更新配置数据，渲染页面
使用时注意先引入jQuery：

<script src="js/jquery-2.1.4/jquery.min.js"></script>

定义一个函数 pie3，方便后期调用

function pie3(){
    return {datas:[/*my_res.data[1].value*/
            {value: my_res3[0].value , name: my_res3[0].name, itemStyle: {color: '#00CED1'}},
            {value: my_res3[1].value ,name: my_res3[1].name, itemStyle: {color: '#9ACD32'}},
            {value: my_res3[2].value , name: my_res3[2].name, itemStyle: {color: '#FFC0CB'}},//设置某个扇形颜色
        ],names:[my_res3[0].name,my_res3[1].name,my_res3[2].name]};  //names没有也可以
}

let my_res3=[];/*在ajax外部定义一个变量，接收ajax内部的变量，但实际上似乎并没有接收，只是相当于做了一个变量声明而已*/
let list3 = {
    "Request": {
        "BusiCode": "search_res_reserved_ip",
        "BusiParams":[{
            "cust_id":"1"
        }
        ]
    },
    "PubInfo": {},
};
$.ajax({
    type : "POST",//请求方式
    contentType: "application/json;charset=UTF-8",//请求的媒体类型
    // async:false, // 同步请求，默认是异步的
    url : "https://10.21.19.86:8082/sdwan/monitor/tunnelDelay",
    data : JSON.stringify(list3),//数据，json字符串，请求的参数
    success : function(res3) {//请求成功
        console.log(res3)
        my_res3 =  res3.data;
        console.log(my_res3);/*此处的是res3.data中的值*/
        myPie.setOption({
            lenged:{
                data: pie3().datas.name,/*调用函数*/
                // data: pie3().names, //也可以
            },
            series:[{
                name:'访问来源',
                data:pie3().datas
            }]
        });
    },
    error : function(e){//请求失败，包含具体的错误信息
        console.log(e.status);
        console.log(e.responseText);
    }
});
console.log(my_res3);/*该处的值是空，因为ajax异步操作，先执行主程序，再执行ajax*/

控制台输出为：
在这里插入图片描述

8 可以在外部调用ajax内部数据的方法

8.1 利用Deferred（延迟）对象

下面节选自

function getData(){
let defer = $.Deferred();   //创建一个新的 Deferred（延迟）对象
let list1 = {
    "Request": {
        "BusiCode": "search_res_reserved_ip",
        "BusiParams":[{
            "cust_id":"1"
        }
        ]
    },
    "PubInfo": {}
};
$.ajax({
    url: "https://10.21.19.86:8082/sdwan/monitor/cpuAndMem", // 模拟请求action后响应的json数据
    // url: "https://10.21.19.86:8082/sdwan/monitor/tunnelDelay", // 模拟请求action后响应的json数据
    data: JSON.stringify(list1),//数据，json字符串, 请求的参数，可以是不同的形式
    type: "POST", // 或者 POST
    contentType: "application/json;charset=UTF-8",//请求的媒体类型
    //dataType: "json",     // 预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,这里设置为 json
    async: true, // 特别注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
    success: function(result){
        defer.resolve(result);  //解决Deferred（延迟）对象，并根据给定的参数调用任何 doneCallbacks 回调函数
        //这个函数会在 延迟对象即ajax 执行完毕后，在调用回调函数的时候 将参数值 result  传递给回调方法
    },
    error : function(e){//请求失败，包含具体的错误信息
        console.log(e.status);
        console.log(e.responseText);
    }
});
return defer.promise();  // 当ajax执行完毕，返回 Deferred 对象
//它创建一个promise对象，其目的是在未来某个时间点返回一个响应。
}
console.log(getData())

下图可以看出数据在外部调用成功：
在这里插入图片描述
主要的步骤：

var defer = $.Deferred();   //创建一个新的 Deferred（延迟）对象
defer.resolve(data);  // data 异步的ajax响应的数据
return defer.promise();  // 当ajax执行完毕，返回 Deferred 对象 

$.when(getData()).done(function(result){ // 在ajax请求完后调用
                       responseData =  result;  // 将拿到的数据赋值到全局变量
                    }).fail(function(){  // 失败时调用
                      });
   });

什么是deferred对象？

开发网站的过程中，我们经常遇到某些耗时很长的javascript操作。其中，既有异步的操作（比如ajax读取服务器数据），也有同步的操作（比如遍历一个大型数组），它们都不是立即能得到结果的。

通常的做法是，为它们指定回调函数（callback）。即事先规定，一旦它们运行结束，应该调用哪些函数。

但是，在回调函数方面，jQuery的功能非常弱。为了改变这一点，jQuery开发团队就设计了deferred对象。

简单说，deferred对象就是jQuery的回调函数解决方案。在英语中，defer的意思是"延迟"，所以deferred对象的含义就是"延迟"到未来某个点再执行。

8.2 hidden隐标签间接方式

获取ajax内部的数据，将内部的数据写到一个标签中（hidden隐标签），在ajax内部通过获取隐标签中的数据内容来间接使用ajax内部的数据

Silence-Lee

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
echarts首次使用总结

1 前提步骤1.1 图中图表的html部分<div class="graph"> <div class="graph1"> <div id="graph11"></div> <div id="graph12"></div> <div id="graph13"&...
复制链接

扫一扫