完整代码

<!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. Spring Security 报：Encoded password does not look like BCrypt

    SpringBoot 集成 Security 时,报 Encoded password does not look like BCrypt 原因:SecurityConfig 必须 Bean 的形式实 ...

  2. ai问答：使用vite如何配置多入口页面

    Vite 是一个 web 开发构建工具,它可以用于开发单页应用和多页应用.要在 Vite 中配置多入口,可以: 在 vite.config.js 中定义多个 entry 入口: export defa ...

  3. 2022-08-18:每一个序列都是[a,b]的形式，a ＜ b 序列连接的方式为，前一个序列的b，要等于后一个序列的a 比如 : [3, 7]、[7, 13]、[13, 26]这三个序列就可以依次连

    2022-08-18:每一个序列都是[a,b]的形式,a < b 序列连接的方式为,前一个序列的b,要等于后一个序列的a 比如 : [3, 7].[7, 13].[13, 26]这三个序列就可以 ...

  4. 2021-08-22：定义什么是可整合数组：一个数组排完序之后，除了最左侧的数外，有arr[i] = arr[i-1]+1，则称这个数组为可整合数组，比如{5,1,2,4,3}、{6,2,3,1,5,

    2021-08-22:定义什么是可整合数组:一个数组排完序之后,除了最左侧的数外,有arr[i] = arr[i-1]+1,则称这个数组为可整合数组,比如{5,1,2,4,3}.{6,2,3,1,5, ...

  5. @csrf_exempt

    在Django中对于基于函数的视图我们可以 @csrf_exempt 注解来标识一个视图可以被跨域访问.那么对于基于类的视图,我们应该怎么办呢? 简单来说可以有两种访问来解决 方法一:在类的 disp ...

  6. Windows server 2012 安装ad域

    Windows server 2012 安装ad域   安装ad域(active directory)服务的作用:存储目录数据并管理域之间的通信,包括用户登录处理,身份验证和目录搜索等. 1.使用ad ...

  7. 2020-06-11-ASP.NET Core Blazor 子组件父组件数据同步的问题

    上一篇写数据绑定的文章,写到最后留了一个坑.当子组件绑定父组件的一个字段,并且子组件修改它的时候父组件不能实时进行同步更新UI的问题,最近终于在Blazui作者的指导下搞定了. UserInfo类要实 ...

  8. CreateProcess error=2, 系统找不到指定的文件。

    遇到一个android 配置.gradle时提示CreateProcess error=2, 系统找不到指定的文件 于是百度有很多这类答案,如:干掉NDK 我按照这么做了,最后顽固的bug 并没有理睬 ...

  9. Spring Boot 自动配置一篇概览

    一.什么是自动配置 bean 自动配置类通过添加 @AutoConfiguration 注解实现. 因为 @AutoConfiguration 注解本身是以 @Configuration 注解的,所以 ...

  10. drf——jwt

    jwt原理 使用jwt认证和使用session认证的区别 三段式 eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibm ...