完整代码

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>第一个 ECharts 实例</title>

    <!-- 引入 echarts.js -->

    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

  </head>

  <body>

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

    <script type="text/javascript">

      // 基于准备好的dom，初始化echarts实例

      var myChart = echarts.init(document.getElementById("main"));

      // 指定图表的配置项和数据

      var option = {

        tooltip: {

          trigger: "axis",

          formatter: "{b0}({a0}): {c0}<br />{b1}({a1}): {c1}%",

        },

        legend: {

          data: ["销量", "占比"],

        },

        xAxis: {

          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],

        },

        yAxis: [

          {

            type: "value",

            name: "销量",

            show: true,

            interval: 10,

            axisLine: {

              lineStyle: {

                color: "#5e859e",

                width: 2,

              },

            },

          },

          {

            type: "value",

            name: "占比",

            min: 0,

            max: 100,

            interval: 10,

            axisLabel: {

              formatter: "{value} %",

            },

            axisLine: {

              lineStyle: {

                color: "#5e859e", //纵坐标轴和字体颜色

                width: 2,

              },

            },

          },

        ],

        series: [

          {

            name: "销量",

            type: "bar",

            barWidth: "50%",

            data: [5, 20, 36, 10, 10, 20],

          },

          {

            name: "占比",

            type: "line",

            smooth: true,

            data: [15, 30, 46, 20, 20, 30],

          },

        ],

      };

      // 使用刚指定的配置项和数据显示图表。

      myChart.setOption(option);

    </script>

  </body>

</html>

效果图展示

重点标记

使用图表类型

参考链接

https://blog.csdn.net/qq_38974638/article/details/108858145

Echarts: 同时显示柱状图和前端的更多相关文章

  1. 前端统计图 echarts 实现简单柱状图

    前端统计图   echarts实现简单柱状图 1. 引入 ECharts <!DOCTYPE html> <html> <head> <meta charse ...

  2. ajax导致Echarts不显示饼图数据、柱状图数据只显示气泡的问题。

    1.ajax导致Echarts不显示饼图数据.柱状图数据只显示气泡的问题. ajax的同步.这个同步的意思是当JS代码加载到当前ajax的时候会把页面里所有的代码停止加载,页面出去假死状态,当这个aj ...

  3. 如何基于 echarts 实现区间柱状图（包括横向）？

    目录 需求 借鉴 echarts 的 demo 最终实现思路 实现效果 遇到的问题: 代码映射 源码 最后 始终如一 需求 需要利用 echarts 实现区间柱状图,效果如下: 效果来源于:g2-柱状 ...

  4. echarts报表显示%+没有0

    function showTablegroup(page) { var series; $.ajax({ type:'post', url:"<%=basePath%>flowA ...

  5. echarts如何显示在页面上

    echarts如何显示在页面上 1.引入echarts的相关.js文件 <script src="js/echarts.min.js"></script> ...

  6. echarts —— 绘制横向柱状图（圆角、无坐标轴）

    UI给了设计图,看了一眼觉得简单,不就是无序列表布局嘛(ul,li),后来才知道那是echarts图,好吧,样式如下: 代码如下:(渐变色没做) <!DOCTYPE html> <h ...

  7. echarts来显示世界地图和全国地图，并且可以下钻层级

    echarts来显示世界地图和全国地图,并且可以下钻层级 使用echarts来显示世界地图和全国地图,并且可以下钻层级 使用的技术 现有的功能 遇到的问题解决 总结 参考内容 直接来源码,地球资源包我 ...

  8. 【前端统计图】echarts实现简单柱状图

    图片.png <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...

  9. echarts在一个折线/柱状图浮窗显示多条数据

    解决问题就在data里面,首先 data里面是可以json数组形式,如官方API上的 name:”“, value:”“,等 value是echart识别折线图的key值.1.来看数据格式 data: ...

  10. 解决Bootstrap 标签页(Tab)插件切换echarts不显示问题

    1.参考连接:https://blog.csdn.net/qq_24313955/article/details/78363981 问题描述:在echarts跟bootstrap选项卡整合的时候,默认 ...

随机推荐

  1. FreeSWITCH使用L16编码通信及raw数据提取

    环境:CentOS 7.6_x64 FreeSWITCH版本 :1.10.9 Python版本:3.9.12 一.背景描述 PCM(Pulse Code Modulation,脉冲编码调制)音频数据是 ...

  2. 【Docker】容器管理

    一.容器生命周期及启动过程 1.容器生命周期 2.容器启动过程 二.容器管理命令 Usage: docker [OPTIONS] COMMAND A self-sufficient runtime f ...

  3. Java动态调用实体的get方法

    /** * 动态调用实体的get方法(注意返回值) * @param dto 实体 * @param name 动态拼接字段 * @return {@link String} * @date 2021 ...

  4. 文心一言 VS chatgpt （7）-- 算法导论2.3 3~4题

    三.使用数学归纳法证明:当n刚好是2的幂时,以下递归式的解是 T(n)=nlgn.若n=2,T(n)=2:若n=2^k,k>1,T(n)=2T(n/2)+n. 文心一言: chatgpt: 首先 ...

  5. 【Java】Java代码拷贝文件的速度

    Java代码拷贝文件的速度究竟有多快? 前言 最近学习Java到了流处理,其中有种流叫FileInputStream和FileOutputStream,简单来说,就是操作文件的,老师给我们示范了一个非 ...

  6. SpringMVC 简单的开始

    SpringMVC简单的开始 利用Spring模板配置写一个web项目. 1.核心配置文件(模板代码) <?xml version="1.0" encoding=" ...

  7. 2023-05-25：给定一个正整数 x，我们将会写出一个形如 x (op1) x (op2) x (op3) x ... 的表达式 其中每个运算符 op1，op2，… 可以是加、减、乘、除之一 例如

    2023-05-25:给定一个正整数 x,我们将会写出一个形如 x (op1) x (op2) x (op3) x ... 的表达式 其中每个运算符 op1,op2,- 可以是加.减.乘.除之一 例如 ...

  8. filler 抓取手机app的数据，手机wifi设置

    1.处于同一局域网下, 2.手机的代服务器修改为手动 3.代理服务器,名称为本机ip地址端口为8888,可以自己设置 4.fillder上面选择允许远程链接

  9. ChatGLM 拉取清华git项目

    windows使用nvdia显卡运行ChatGLM 1. 安装nvidia显卡驱动 https://developer.nvidia.com/cuda-11-8-0-download-archive? ...

  10. C#使用HtmlAgilityPack解析Html 爬取图片和视频

    HtmlAgilityPack简介 HtmlAgilityPack是.net下的一个HTML解析类库.支持用XPath来解析HTML. 问题来了,有人就会问为什么要使用能XPath呢? 小编答:因为对 ...