Echarts 百度画图插件

最新推荐文章于 2022-03-01 22:00:00 发布

枫之木落

最新推荐文章于 2022-03-01 22:00:00 发布

阅读量1.8k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_32337109/article/details/79112348

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Echarts 是百度的一个js画图插件，非常好用，可以画扇形图、条形图、折线图、散点图、地图等，简单好用，画的图非常漂亮，官方有各种模板和入门教程

html代码添加一个div标签就行了，echarts生成的图片大小是根据你设置div的大小生成的

<div id="main" style="width: 600px;height:g00px;">

js代码：
主要分为三步：
1、初始化echarts
2、编辑option，一般有option模板，可以直接复制，也可以自定义，option的数据直接传一个同一格式的数组代替即可，这点如有疑问可以问我
3、使用刚指定的配置项和数据显示图表。

//基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

var  option = {
    backgroundColor: '#EFEFEF',
    /*  下载图片,通用--start */
     toolbox: {
        　　show: true,
        　　feature: {
        　　　　saveAsImage: {
        　　　　show:true,
        　　　　excludeComponents :['toolbox'],
        　　　　pixelRatio: 2
        　　　　}
        　　}
    },
    /*  下载图片--end */ 
     title: {
         text: 'sdn水下传感器网络图',
     },
     tooltip:{},
     animationDurationUpdate: 1500,
     animationEasingUpdate: 'quinticInOut',
     series : [
         {
             type: 'graph',
             layout: 'none',
             symbolSize: 20,//图形的大小（示例中的圆的大小）
             roam: true,//鼠标缩放及平移
             focusNodeAdjacency:true,//是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点
             label: {
                 normal: {
                     show: true ,  //控制非高亮时节点名称是否显示
                     position:'top',
                     fontSize:20
                 }
             },

             edgeSymbol: ['circle', 'arrow'],
             edgeSymbolSize: [0, 0],    //箭头的大小
             edgeLabel: {
                 normal:{
                     show:false
                 },
                 emphasis: {
                     textStyle: {
                         fontSize: 20  //边节点显示的字体大小
                     }
                 }
             },

    //节点信息

     data:_nodesSwitch,//_nodesSwitch数组，里面是从后端获得数据

     links:_relationsSwitch,
             lineStyle: {
                 normal: {
                     show:true,
                     color:
                     {       
                             type: 'linear',
                             x: 0,
                             y: 0,
                             x2: 0,
                             y2: 1,
                             colorStops: [
                             {
                                 offset: 0, color: 'red' // 0% 处的颜色
                             }
                             ,{
                                 offset: 1, color: 'blue' // 100% 处的颜色
                             }],
                             globalCoord: false // 缺省为 false
                         },

                  // curveness: 0.2

                 },
                 emphasis:{
                     color:'red',
                     width:3,
                     type:'dashed',//虚线

                 }
             },

             tooltip:
             {
             position:'bottom',//悬浮时显示的位置
             backgroundColor:'green',
             textStyle:{fontSize:18,

             },

             formatter:function(params){//悬浮提示框显示的内容
                if (params.data.islink) {
                    return '节点'+params.data.target+params.data.source+'权值：'+params.data.weight;
                }
                else if (params.data.isnode){return params.data.ip;}
             }
             },//悬浮时的提示框，不设置时是随鼠标移动

         }
     ]
};


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