Echarts绘制折线图柱状图混合图表练习

使用绘制折线图柱状图混合图表练习


  第一次看见这个图表库,感觉好NB。做个练习纪念纪念。


  页面的布局和图表的设置。在官方示例上编辑修改很是方便。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双坐标系</title>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.common.min.js"></script>
    <script>
        $(document).ready(function () {
            //放置图表的容器
            var group = $("#group");
            //设置容器的宽度、高度和背景颜色
            group.css({
                "width": "650px",
                "height": "400px",
                "background-color": "aliceblue"
            });
            //创建图表对象
            var chart = echarts.init(group.get(0));
            chart.showLoading();//显示等待条
            //设置图表显示的内容
            var option = {
                legend: {
                    selectedMode: false,//不可点击
                    data: ['蒸发量', '降水量', '平均温度']
                },
                grid: {
                    left: 100
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                        splitLine: {//显示分割线
                            show: true
                        }
                    }

                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '水量',
                        splitLine: {//不显示分割线
                            show: false
                        },
                        axisLabel: {
                            formatter: '{value} ml'
                        }
                    },
                    {
                        type: 'value',
                        name: '温度',
                        axisLabel: {
                            formatter: '{value} °C'
                        },
                        splitLine: {
                            show: false
                        }
                    }
                ],
                series: [
                    {
                        name: '蒸发量',
                        type: 'bar',
                        data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                    },
                    {
                        name: '降水量',
                        type: 'bar',
                        data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                    },
                    {
                        name: '平均温度',
                        type: 'line',
                        yAxisIndex: 1,//索引从0开始
                        data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            chart.setOption(option);
            //两秒后关闭等待进度条
            setTimeout(function () {
                chart.hideLoading();//隐藏等待条
            }, 2000);
        });
    </script>
</head>
<body>
<div id="group"></div>
</body>
</html>

  实现效果上感觉比使用Hellocharts和MPAndroidChart方便了不少(当然这也没有什么可比性,不过可以试试使用MPAndroidChart实现类似这样的图表效果)运行效果如下图:
运行效果

  • 7
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先,你需要引入 Echarts 和 Axios 库。在 Vue 组件的 mounted 钩子函数中,通过 Axios 发送请求获取数据,然后在回调函数中使用 Echarts 绘制图表下面是一个简单的示例代码: ```html <template> <div> <div ref="chart" style="height: 400px;"></div> </div> </template> <script> import axios from 'axios' import echarts from 'echarts' export default { mounted() { axios.get('/api/data').then(response => { const data = response.data const chart = echarts.init(this.$refs.chart) chart.setOption({ title: { text: '折线图柱状图混合展示' }, tooltip: {}, legend: { data: ['销量', '收入'] }, xAxis: { data: data.categories }, yAxis: [ { type: 'value', name: '销量' }, { type: 'value', name: '收入' } ], series: [ { name: '销量', type: 'line', data: data.sales }, { name: '收入', type: 'bar', yAxisIndex: 1, data: data.income } ] }) }) } } </script> ``` 在这个示例中,我们通过 Axios 发送 GET 请求获取数据,然后在回调函数中使用 Echarts 绘制图表Echarts 的初始化函数需要传入一个 DOM 元素,我们通过 `$refs` 引用到了这个元素。 在 Echarts 的配置中,我们定义了标题、提示框、例、横轴、两个纵轴以及两个系列。其中,第一个系列是折线图,第二个系列是柱状图。我们使用了两个纵轴,分别对应两个系列的数据。`yAxisIndex` 属性指定了柱状图使用第二个纵轴。 注意,这个示例中的数据是从服务器端获取的,因此你需要在后端编写一个 API 接口来提供数据。在开发环境中,可以使用 Mock.js 库模拟数据

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值