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

<!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) { 
　//首先定义一个数组 
var colorList = [ 
'#C33531','#EFE42A','#64BD3D','#EE9201','#29AAE3', 
'#B74AE5','#0AAF9F','#E89589' 
]; 
return colorList[params.dataIndex] 
}, 
　　　　　//以下为是否显示 
label: { 
show: false 
} 
} 
}

Echarts整体改变柱状图柱子颜色：

                                itemStyle:{
                                    normal:{
                                        color:'#4ad2ff'
                                    }
                                },

添加下载和还原按钮：

        toolbox: {
            show: true,
            feature: {
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },

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

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

猜你喜欢