Echarts柱状图折线图混合使用

简介: Echarts柱状图折线图混合使用


前面用到的更多的是单个统计图,有些统计图里面,使用柱状图折线图混合使用的,下面写的是用ajax+json本地模拟数据,发送请求,渲染出一个柱状图折线图混合图表。


一个练手的小demo,仅供参考:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>柱状图折线图混合使用</title>
        <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
        <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    </head>
    <style>
        .charts6 {
            background: #0d1c2e;
        }
    </style>
    <body>
        <div class="row">
            <div class="col-md-12  col-sm-12  col-xs-12 charts6">
                <div id="main3" style="height: 200px;"></div>
            </div>
        </div>
    </body>
    <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        // 折线图
        $.ajax({
            url: "test.json",
            data: {},
            type: 'GET',
            success: function(data) {
                console.log(JSON.stringify(data))
                dFun(data.echatX, data.echatY, data.echatY2);
            },
        });
        // 基于准备好的dom,初始化echarts实例
        var dChart = echarts.init(document.getElementById('main3'));
        // 指定图表的配置项和数据
        function dFun(x_data, y_data, y2_data) {
            dChart.setOption({
                title: {
                    left: 'left',
                    text: '概率',
                    show: false
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: '{a}:{c}',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                grid: {
                    show: false,
                    top: '30',
                    bottom: '60',
                    right: '60',
                    left: '60'
                },
                legend: {
                    show: true,
                    selectedMode: 'single', // 设置显示单一图例的图形,点击可切换
                    bottom: 10,
                    left: 50,
                    textStyle: {
                        color: '#666',
                        fontSize: 12
                    },
                    itemGap: 20,
                    inactiveColor: '#ccc'
                },
                xAxis: {
                    splitLine: {     show: false   },
                    type: 'category',
                    data: x_data,
                    axisPointer: {
                        type: 'shadow'
                    },
                    // 改变x轴颜色
                    axisLine: {
                        lineStyle: {
                            color: '#00a2e2',
                            width: 1, // 这里是为了突出显示加上的
                        }
                    },
                    axisTick: {
                        show: true,
                        interval: 0
                    },
                },
                // 设置两个y轴,左边显示数量,右边显示概率
                yAxis: [{
                        splitLine: {     show: false   },
                        type: 'value',
                        name: '数量',
                        max: 1000,
                        min: 0,
                        show: true,
                        interval: 500,
                        // 改变y轴颜色
                        axisLine: {
                            lineStyle: {
                                color: '#00a2e2',
                                width: 1, // 这里是为了突出显示加上的
                            }
                        },
                    },
                    // 右边显示概率
                    {
                        splitLine: {     show: false   },
                        type: 'value',
                        name: '概率',
                        min: 0,
                        max: 100,
                        interval: 10,
                        // 改变y轴颜色
                        axisLine: {
                            lineStyle: {
                                color: '#00a2e2',
                                width: 1, // 这里是为了突出显示加上的
                            }
                        },
                        axisLabel: {
                            formatter: '{value} %'
                        }
                    }
                ],
                // 每个设备分数量、概率2个指标,只要让他们的name一致,即可通过,legeng进行统一的切换
                series: [{
                        name: '',
                        type: 'bar',
                        symbol: 'circle', // 折线点设置为实心点
                        symbolSize: 6, // 折线点的大小
                        data: y_data,
                        barWidth: '50%',
                    },
                    {
                        //折线
                        name: '',
                        type: 'line',
                        symbol: 'circle', // 折线点设置为实心点
                        symbolSize: 6, // 折线点的大小
                        yAxisIndex: 1, // 这里要设置哪个y轴,默认是最左边的是0,然后1,2顺序来。
                        data: y2_data,
                        symbolSize: 10,
                        itemStyle: {
                            normal: {
                                color: "#DDA0DD"
                            }
                        }
                    },
                ]
            });
        }
    </script>
</html>

自己写的一个test.json模拟数据:

{
    "echatX": [
        "2019-07-02",
        "2019-07-03",
        "2019-07-04",
        "2019-07-05",
        "2019-07-06",
        "2019-07-07",
        "2019-07-08",
        "2019-07-09",
        "2019-07-10",
        "2019-07-11",
        "2019-07-12",
        "2019-07-13",
        "2019-07-14",
        "2019-07-15"
    ],
    "echatY": [
        501,210,123,333,445,157,151,369,101,101,350,435,153,100
    ],
    "echatY2": [
      80,40,13,36,57,77,41,39,61,31,60,73,33,50
    ],
    "peopleTotal":15,"peopleOnline":4,"peopleOutline":12,"ranges":[]
}
相关文章
|
2月前
echarts 柱状图/折线图x轴坐标间隔
echarts 柱状图/折线图x轴坐标间隔
52 0
|
2月前
|
JavaScript 应用服务中间件 nginx
【报错】nginx部署项目后Echarts折线图无法展示
在Vue3+TS+Arco项目中,打包后使用Nginx部署的Echarts折线图显示异常,报`Cannot read properties of undefined(reading &#39;setOption&#39;)`错误。问题源于在定义div时使用了Vue2的`$refs`语法,导致DOM元素无法正确初始化Echarts。解决方法有两种:1) 不推荐使用`document.getElementById`获取DOM并初始化Echarts;2) 推荐在Vue3中通过`ref`获取DOM,在`onMounted`中使用`echarts.init`并借助`nextTick`异步绘制数据。
|
12天前
|
搜索推荐 数据可视化 BI
ECharts 蓝色系-荧光图标折线图01案例
ECharts 案例展示了一周内各路线数据的蓝色荧光折线图,揭示流量趋势。预览包括静态图片和动态GIF。使用ECharts 5.2.0配置图表,包含背景、网格、图例及数据。代码示例初始化图表、定义X轴类别和Y轴值,以及系列颜色。完整案例可在链接中下载。案例结合动态效果与个性化设计,增强数据可视化的吸引力。
15 0
ECharts 蓝色系-荧光图标折线图01案例
|
12天前
|
JavaScript Apache 容器
如何使用ECharts制作一个简单的柱状图
如何使用ECharts制作一个简单的柱状图
18 0
|
2月前
【统计图】Echarts实现多条折线图渐变堆叠效果
【统计图】Echarts实现多条折线图渐变堆叠效果
|
2月前
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
|
2月前
Echarts柱状图x轴刻度间隔显示不全/x轴文字倾斜
Echarts柱状图x轴刻度间隔显示不全/x轴文字倾斜
215 0
|
7月前
Echarts 柱状图添加标记 最大值 最小值 平均值
Echarts 柱状图添加标记 最大值 最小值 平均值
|
7月前
|
容器
Echarts 最简单创建柱状图
Echarts 最简单创建柱状图
|
8月前
|
JSON 数据格式
ECharts折线图渲染json格式数据(格式为对象)
ECharts折线图渲染json格式数据(格式为对象)
75 0