大数据图表展示爬坑之路

即将拥有人鱼线的Iverson

已于 2022-07-04 11:23:30 修改

阅读量1.8k

点赞数

分类专栏： # 图表文章标签：大数据 echarts 前端

于 2018-04-20 15:34:07 首次发布

本文链接：https://blog.csdn.net/Iversons/article/details/80019485

版权

图表专栏收录该内容

1 篇文章 0 订阅

订阅专栏

#Echarts大数据图表展示爬坑之路

话不多说，先上一个小白示例:

<!DOCTYPE html>
<html  lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ECharts&Bootstrap</title>
    <script src="jquery/jquery.min.js"></script>
    <!--引入Bootstrap的css及js-->
    <script src="Bootstrap/js/bootstrap.min.js"></script>
    <link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入 echarts.js -->
    <script src="Echarts/echarts.min.js"></script>
    <!-- 引入 echarts定制主题 -->
    <script src="Echarts/Theme/macarons.js"></script>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-xs-12 col-sm-12">
            <div id="bar" style="width: 100%;height:500px;"></div>
        </div>
        <div class="col-md-6 col-xs-12 col-sm-12">
            <div id="line" style="width: 100%;height:500px;"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 col-xs-12 col-sm-12">
            <div id="pie" style="width: 100%;height:500px;"></div>
        </div>
        <div class="col-md-6 col-xs-12 col-sm-12">
            <div id="" style="width: 100%;height:500px;"></div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var myChart1 = echarts.init(document.getElementById('bar'),'vintage').setOption({
        title: {
            text: '柱状图'
        },
        tooltip: {},
        legend: {
            data: ['销量']
        },
        xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子", "XX"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [15, 30, 56, 77, 10, 40, 98]
        }]
    });
    var myChart2 = echarts.init(document.getElementById('line'),'vintage').setOption({
        title: {
            text: '条形图'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","XX"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'line',
            data: [15, 30, 56, 77, 10, 40,98]
        }]
    });
    var myChart3 = echarts.init(document.getElementById('pie'),'shine').setOption({
        title: {
            text: '饼状图'
        },
        series: {
            type: 'pie',
            data: [
                {name: 'A', value: 1212},
                {name: 'B', value: 2323},
                {name: 'C', value: 1919}
            ]
        }
    });
    // 屏幕缩小的时候，图表也跟着缩小
    window.resize = function() {
        myChart1.resize();
        myChart2.resize();
        myChart3.resize();
    };
</script>
</body>
</html>

Echarts折线图tooltip里数据添加单位：

tooltip: {
   trigger: 'axis',
    //在这里设置
   formatter: '{a0}:{c0}万'
},

Echartd为每个柱状图的柱子设置不同的颜色：

itemStyle: {
    normal: {
        color: function(params) {
            //首先定义一个数组 
            let colorList = ['#C33531', '#EFE42A', '#64BD3D', '#EE9201', '#29AAE3', '#B74AE5', '#0AAF9F', '#E89589'];
            return colorList[params.dataIndex]
        },
        //以下为是否显示 
        label: { show: false }
    }
}

Echarts整体改变柱状图柱子颜色：<在series中添加如下代码>

color: '#C23531',

添加下载和还原按钮：

toolbox: {
    feature: {
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ['line', 'bar'] },
        restore: { show: true },
        saveAsImage: { show: true },
    },
},

***Echart饼图设置难点汇总：

设置饼图指示线不显示：<在series中添加如下代码>

itemStyle:{
    normal:{
        label:{
            show:true     //*显示/隐藏标示文字
        },
    },
},

修改饼图指示线样式<在series中添加如下代码>

label: {
    normal: {
        formatter: '{c|{c}} \n {b|{b}:}{d|{d}%}',
        backgroundColor: '#f3f3f3',
        borderColor: '#000000',
        fontSize: 18,
        borderWidth: 1,
        rich: {
            c: {
                fontSize: 20,
                align:'center',
            },
            b: {
                padding: [5,5,5,0],
            },
            d:{
                color: '#0083ff',
                padding: [5,5,5,0],
            }
        }
    }
},

饼图添加悬浮提示框<在tooltip中添加如下代码>

trigger: 'item',
//提示框触发方式,可选 item、axis
formatter:function(params){
    return params.name+'<br/>总票数 : '+params.data.value+'票 <br/>占比：'+ (params.percent - 0).toFixed(2)+'%';
},

饼图 title 设置：

title:{
    text:'货量:',
    x:10,                        // title中text的偏移设置
    textStyle:{
        fontSize:'16',
        fontWeight:'normal',     //可选类型为normal、bold...
        color:'#1fc7bd',
    }
},

饼图 legend 设置：

legend:{
    x:'center',
    y:'bottom',
    padding:[5,25,30,25],
    itemGap: 5,            //每个小标签之间的间隙
    itemHeight: 15,        //每个小标签的宽度
    itemWidth: 30,         //每个小标签的高度
    textStyle: {           //每个小标签的文字颜色
        color: '#990188'
    }
},

饼图设置每个区域颜色:

color: ['#1fc7bd','#f6bb42','#f476af','#76aff4','#0083ff'],       //*用来设置每个区域颜色

设置饼图的大小和位置：<在series中添加如下代码>

radius:'50%',                   //设置饼图大小
center:['50%','50%'],           //设置饼图X、Y的位置

*设置饼图可以单击：<在series中添加如下代码>

selectedMode: 'single',

然后在setOption外面添加如下代码：

ChartName.on('click', function (param) {
    const selected = param.selected;
});

为目标图表添加 Loading 状态：

TargetChart.showLoading('default',{text:'页面正在拼命加载中...',maskColor:'#a9f0ff',textColor: '#000',});
.showLoading('default',{text:'页面正在拼命加载中...',maskColor:'#a9f0ff',textColor: '#000',});

去掉目标图表的 Loading 状态：

TargetChart.hideLoading();
.hideLoading();

目标图表的点击事件：<如柱状图>

TargetChart.on('click', function (recod) {}
.on('click', function (recod) {}

*关闭目标图表的点击事件：<一般定义在目标图表点击事件之前！>

TargetChart.off('click');
.off('click');

强制显示所有X轴的标签：

xAxis: {
    data: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "In-transit"],
        axisLabel: {
            interval: 0,
        },
        name: '月份',
    },
},

柱状图提示悬浮框设置：

tooltip: {
    trigger: 'axis',
    axisPointer : {
        type : 'cross'        // 默认为直线,可选为:'line' | 'shadow' | 'cross'
    },
},

柱状图倒置：

xAxis: {
    axisLabel: {
        interval:0,
    },
    position:'top',
},
yAxis: {
    type:'value',
    inverse:true,
},

为图表添加下载/切换图表类型/还原等按钮：

toolbox:{
    show: true,
    feature: {
        dataView: {readOnly: false},
        magicType: {type: ['line', 'bar']},
        saveAsImage: {title:'保存'}
    }
},

Canvas中图表位置的的定位：

grid:{
     y2:5,        //距离底部5px
},

设置当饼图数据为0时,不显示其指示线：

//当饼图的某条数据为零时删除<隐藏线段>
this.state.ChartVirtualData.map(X=>{
    if (X.value == 0) {
      X.value = ""      //如果数据为0则将其设置为空字符串<数据为空字符串不会显示！>
    }
})

让状图正上方始终有提示<itemStyle>：

series: [{
    name: 'TEU',
    color: '#990614',
    type: 'bar',
    barWidth: 20,
    data:this.state.ShippingBoxChartValue,
    itemStyle: {
      normal: {
           label: {
                show: true, //开启显示
                position: 'top', //在上方显示
                textStyle: { //数值样式
                color: 'black',
                fontSize: 16
                   }
                }
            }
        },
     animationDelay: function (idx) {
        return idx * 10 + 100;
     }
}],

#Highcharts大数据图表展示爬坑之路

Highcharts JS去除Highcharts.com链接的方法
在js文件中找到Credits，然后把enable的属性从!0改为0。也可以更改为自己需要的：
enabled:设置是否显示链接；
text：设置链接显示的名称；

href：设置链接的url地址；

去掉图片右上角的打印及导出按钮，在js中设置以下代码：

exporting:{
    enabled:true     //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示
},

Highcharts JS如何去除打印功能？<exporting.js 图表库去掉以下代码：>

printButton : {
    symbol :"printIcon",
    x :-36,
    symbolFill :"#B5C9DF",
    hoverSymbolFill :"#779ABF",
    _titleKey :"printButtonTitle",
    onclick : function() {
    this.print()
   }
}

使用户可以下载生成的图表<引入如下js>;

<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>

为data后的数据添加符号：

#Echarts大数据图表展示爬坑之路

#Highcharts大数据图表展示爬坑之路

改变默认主题样式<例如黑色主题>：

<script src="https://img.hcharts.cn/highcharts/themes/dark-unica.js"></script>

即将拥有人鱼线的Iverson

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录