【数据可视化从入门到精通】ECharts 入门案例：销售柱状图,进阶案例：多 ECharts 实例，自定义主题③

最新推荐文章于 2024-04-22 15:27:06 发布
最新推荐文章于 2024-04-22 15:27:06 发布
阅读量526 收藏 2
点赞数 1
分类专栏： # 【数据可视化】 文章标签： echarts html 数据可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48200589/article/details/120662132
版权

入门案例：销售柱状图

在这里插入图片描述

代码

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
    <style>
      #chart {
        width: 800px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="chart"></div>
    <script>
      const chartDom = document.getElementById('chart')
      const chart = echarts.init(chartDom)
      chart.setOption({
        title: {
          text: '快速入门ECharts开发'
        },
        xAxis: {
          data: ['食品', '数码', '服饰', '箱包']
        },
        yAxis: {},
        series: {
          type: 'bar',
          data: [100, 120, 90, 150]
        }
      })
    </script>
  </body>
</html>

思考：ECharts 的绘图流程是怎样的？

引入 js 库
编写渲染容器 DOM，添加 width 和 height 样式属性
获取渲染 DOM 对象
初始化 ECharts 对象
编写 option 参数
调用 setOption 完成渲染

进阶案例：多 ECharts 实例

在这里插入图片描述

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
    <style>
      #chart {
        width: 800px;
        height: 300px;
      }
      #chart2 {
        width: 800px;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <div>这是第一个 echarts 图表</div>
    <div id="chart"></div>
    <div>这是第二个 echarts 图表</div>
    <div id="chart2"></div>
    <script>
      const chartDom = document.getElementById('chart')
      const chartDom2 = document.getElementById('chart2')
      const chart = echarts.init(chartDom)
      const chart2 = echarts.init(chartDom2)
      const option1 = {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          areaStyle: {}
        }]
      };
      const option2 = {
        legend: {
          data: ['高度(km)与气温(°C)变化关系']
        },
        tooltip: {
          trigger: 'axis',
          formatter: 'Temperature : <br/>{b}km : {c}°C'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} °C'
          }
        },
        yAxis: {
          type: 'category',
          axisLine: {onZero: false},
          axisLabel: {
            formatter: '{value} km'
          },
          boundaryGap: false,
          data: ['0', '10', '20', '30', '40', '50', '60', '70', '80']
        },
        series: [{
          name: '高度(km)与气温(°C)变化关系',
          type: 'line',
          smooth: true,
          lineStyle: {
            width: 3,
            shadowColor: 'rgba(0,0,0,0.4)',
            shadowBlur: 10,
            shadowOffsetY: 10
          },
          data:[15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5]
        }]
      }
      chart.setOption(option1)
      chart2.setOption(option2)
    </script>
  </body>
</html>

自定义主题更换

在这里插入图片描述

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.js"></script>
    <style>
      #chart {
        width: 800px;
        height: 400px;
      }
    </style>
    <script>      
(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['exports', 'echarts'], factory);
    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
        // CommonJS
        factory(exports, require('echarts'));
    } else {
        // Browser globals
        factory({}, root.echarts);
    }
}(this, function (exports, echarts) {
    var log = function (msg) {
        if (typeof console !== 'undefined') {
            console && console.error && console.error(msg);
        }
    };
    if (!echarts) {
        log('ECharts is not Loaded');
        return;
    }
    echarts.registerTheme('westeros', {
        "color": [
            "#516b91",
            "#59c4e6",
            "#edafda",
            "#93b7e3",
            "#a5e7f0",
            "#cbb0e3"
        ],
        "backgroundColor": "rgba(0,0,0,0)",
        "textStyle": {},
        "title": {
            "textStyle": {
                "color": "#516b91"
            },
            "subtextStyle": {
                "color": "#93b7e3"
            }
        },
        "line": {
            "itemStyle": {
                "normal": {
                    "borderWidth": "2"
                }
            },
            "lineStyle": {
                "normal": {
                    "width": "2"
                }
            },
            "symbolSize": "6",
            "symbol": "emptyCircle",
            "smooth": true
        },
        "radar": {
            "itemStyle": {
                "normal": {
                    "borderWidth": "2"
                }
            },
            "lineStyle": {
                "normal": {
                    "width": "2"
                }
            },
            "symbolSize": "6",
            "symbol": "emptyCircle",
            "smooth": true
        },
        "bar": {
            "itemStyle": {
                "normal": {
                    "barBorderWidth": 0,
                    "barBorderColor": "#ccc"
                },
                "emphasis": {
                    "barBorderWidth": 0,
                    "barBorderColor": "#ccc"
                }
            }
        },
        "pie": {
            "itemStyle": {
                "normal": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                },
                "emphasis": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                }
            }
        },
        "scatter": {
            "itemStyle": {
                "normal": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                },
                "emphasis": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                }
            }
        },
        "boxplot": {
            "itemStyle": {
                "normal": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                },
                "emphasis": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                }
            }
        },
        "parallel": {
            "itemStyle": {
                "normal": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                },
                "emphasis": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                }
            }
        },
        "sankey": {
            "itemStyle": {
                "normal": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                },
                "emphasis": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                }
            }
        },
        "funnel": {
            "itemStyle": {
                "normal": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                },
                "emphasis": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                }
            }
        },
        "gauge": {
            "itemStyle": {
                "normal": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                },
                "emphasis": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                }
            }
        },
        "candlestick": {
            "itemStyle": {
                "normal": {
                    "color": "#edafda",
                    "color0": "transparent",
                    "borderColor": "#d680bc",
                    "borderColor0": "#8fd3e8",
                    "borderWidth": "2"
                }
            }
        },
        "graph": {
            "itemStyle": {
                "normal": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                }
            },
            "lineStyle": {
                "normal": {
                    "width": 1,
                    "color": "#aaaaaa"
                }
            },
            "symbolSize": "6",
            "symbol": "emptyCircle",
            "smooth": true,
            "color": [
                "#516b91",
                "#59c4e6",
                "#edafda",
                "#93b7e3",
                "#a5e7f0",
                "#cbb0e3"
            ],
            "label": {
                "normal": {
                    "textStyle": {
                        "color": "#eeeeee"
                    }
                }
            }
        },
        "map": {
            "itemStyle": {
                "normal": {
                    "areaColor": "#f3f3f3",
                    "borderColor": "#516b91",
                    "borderWidth": 0.5
                },
                "emphasis": {
                    "areaColor": "#a5e7f0",
                    "borderColor": "#516b91",
                    "borderWidth": 1
                }
            },
            "label": {
                "normal": {
                    "textStyle": {
                        "color": "#000"
                    }
                },
                "emphasis": {
                    "textStyle": {
                        "color": "#516b91"
                    }
                }
            }
        },
        "geo": {
            "itemStyle": {
                "normal": {
                    "areaColor": "#f3f3f3",
                    "borderColor": "#516b91",
                    "borderWidth": 0.5
                },
                "emphasis": {
                    "areaColor": "#a5e7f0",
                    "borderColor": "#516b91",
                    "borderWidth": 1
                }
            },
            "label": {
                "normal": {
                    "textStyle": {
                        "color": "#000"
                    }
                },
                "emphasis": {
                    "textStyle": {
                        "color": "#516b91"
                    }
                }
            }
        },
        "categoryAxis": {
            "axisLine": {
                "show": true,
                "lineStyle": {
                    "color": "#cccccc"
                }
            },
            "axisTick": {
                "show": false,
                "lineStyle": {
                    "color": "#333"
                }
            },
            "axisLabel": {
                "show": true,
                "textStyle": {
                    "color": "#999999"
                }
            },
            "splitLine": {
                "show": true,
                "lineStyle": {
                    "color": [
                        "#eeeeee"
                    ]
                }
            },
            "splitArea": {
                "show": false,
                "areaStyle": {
                    "color": [
                        "rgba(250,250,250,0.05)",
                        "rgba(200,200,200,0.02)"
                    ]
                }
            }
        },
        "valueAxis": {
            "axisLine": {
                "show": true,
                "lineStyle": {
                    "color": "#cccccc"
                }
            },
            "axisTick": {
                "show": false,
                "lineStyle": {
                    "color": "#333"
                }
            },
            "axisLabel": {
                "show": true,
                "textStyle": {
                    "color": "#999999"
                }
            },
            "splitLine": {
                "show": true,
                "lineStyle": {
                    "color": [
                        "#eeeeee"
                    ]
                }
            },
            "splitArea": {
                "show": false,
                "areaStyle": {
                    "color": [
                        "rgba(250,250,250,0.05)",
                        "rgba(200,200,200,0.02)"
                    ]
                }
            }
        },
        "logAxis": {
            "axisLine": {
                "show": true,
                "lineStyle": {
                    "color": "#cccccc"
                }
            },
            "axisTick": {
                "show": false,
                "lineStyle": {
                    "color": "#333"
                }
            },
            "axisLabel": {
                "show": true,
                "textStyle": {
                    "color": "#999999"
                }
            },
            "splitLine": {
                "show": true,
                "lineStyle": {
                    "color": [
                        "#eeeeee"
                    ]
                }
            },
            "splitArea": {
                "show": false,
                "areaStyle": {
                    "color": [
                        "rgba(250,250,250,0.05)",
                        "rgba(200,200,200,0.02)"
                    ]
                }
            }
        },
        "timeAxis": {
            "axisLine": {
                "show": true,
                "lineStyle": {
                    "color": "#cccccc"
                }
            },
            "axisTick": {
                "show": false,
                "lineStyle": {
                    "color": "#333"
                }
            },
            "axisLabel": {
                "show": true,
                "textStyle": {
                    "color": "#999999"
                }
            },
            "splitLine": {
                "show": true,
                "lineStyle": {
                    "color": [
                        "#eeeeee"
                    ]
                }
            },
            "splitArea": {
                "show": false,
                "areaStyle": {
                    "color": [
                        "rgba(250,250,250,0.05)",
                        "rgba(200,200,200,0.02)"
                    ]
                }
            }
        },
        "toolbox": {
            "iconStyle": {
                "normal": {
                    "borderColor": "#999999"
                },
                "emphasis": {
                    "borderColor": "#666666"
                }
            }
        },
        "legend": {
            "textStyle": {
                "color": "#999999"
            }
        },
        "tooltip": {
            "axisPointer": {
                "lineStyle": {
                    "color": "#cccccc",
                    "width": 1
                },
                "crossStyle": {
                    "color": "#cccccc",
                    "width": 1
                }
            }
        },
        "timeline": {
            "lineStyle": {
                "color": "#8fd3e8",
                "width": 1
            },
            "itemStyle": {
                "normal": {
                    "color": "#8fd3e8",
                    "borderWidth": 1
                },
                "emphasis": {
                    "color": "#8fd3e8"
                }
            },
            "controlStyle": {
                "normal": {
                    "color": "#8fd3e8",
                    "borderColor": "#8fd3e8",
                    "borderWidth": 0.5
                },
                "emphasis": {
                    "color": "#8fd3e8",
                    "borderColor": "#8fd3e8",
                    "borderWidth": 0.5
                }
            },
            "checkpointStyle": {
                "color": "#8fd3e8",
                "borderColor": "rgba(138,124,168,0.37)"
            },
            "label": {
                "normal": {
                    "textStyle": {
                        "color": "#8fd3e8"
                    }
                },
                "emphasis": {
                    "textStyle": {
                        "color": "#8fd3e8"
                    }
                }
            }
        },
        "visualMap": {
            "color": [
                "#516b91",
                "#59c4e6",
                "#a5e7f0"
            ]
        },
        "dataZoom": {
            "backgroundColor": "rgba(0,0,0,0)",
            "dataBackgroundColor": "rgba(255,255,255,0.3)",
            "fillerColor": "rgba(167,183,204,0.4)",
            "handleColor": "#a7b7cc",
            "handleSize": "100%",
            "textStyle": {
                "color": "#333333"
            }
        },
        "markPoint": {
            "label": {
                "normal": {
                    "textStyle": {
                        "color": "#eeeeee"
                    }
                },
                "emphasis": {
                    "textStyle": {
                        "color": "#eeeeee"
                    }
                }
            }
        }
    });
}));
    </script>
  </head>
  <body>
    <div id="chart"></div>
    <script>
      const chartDom = document.getElementById('chart');
      const chart = echarts.init(chartDom, 'westeros', { renderer: 'svg' });
      chart.setOption({
        title: {
          text: 'ECharts 入门案例'
        },
        xAxis: {
          data: ['食品', '数码', '服饰', '箱包']
        },
        yAxis: {},
        series: {
          type: 'bar',
          data: [100, 120, 90, 150]
        }
      });
    </script>
  </body>
</html>
不停喝水
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Echarts坐标轴如何实现log对数轴
sunnyjingqi的博客
01-19 783
最近开发一个loss曲线图，x轴和y轴都要求用log对数轴，刚开发的时候x轴用的类目轴（category）图表，设置axisLabel返回值，强制转化成对数，以及最小值最大值等，实现x轴刻度间隔为10的指数，但这样series的data数据渲染总是感觉很奇怪。当把x轴设置成log时，图标走线也是不容客观，很多数据也没见了，像是数据被echarts过滤掉似的，最后几经周折终于在网上查到了原因。
Echarts大屏数据可视化集合数据可视化集合案例源码 .zip
05-22
Echarts的大屏数据可视化集合数据可视化集合案例源码，包含会议展览、业务监控、风险预警、数据分析展示等多种展示需求可视化集合。（75+24套）数据可视化集合，75套数据可视化源码，24套数据可视化源码。Echarts的数据可视化集合案例源码，包含会议展览、业务监控、风险预警、数据分析展示等多种展示需求可视化集合。（75+24套）数据可视化集合，75套数据可视化源码，24套数据可视化源码。Echarts的数据可视化集合案例源码，包含会议展览、业务监控、风险预警、数据分析展示等多种展示需求可视化集合。（75+24套）数据可视化集合，75套数据可视化源码，24套数据可视化源码。Echarts的数据可视化集合案例源码，包含会议展览、业务监控、风险预警、数据分析展示等多种展示需求可视化集合。（75+24套）数据可视化集合，75套数据可视化源码，24套数据可视化源码。Echarts的数据可视化集合案例源码，包含会议展览、业务监控、风险预警、数据分析展示等多种展示需求可视化集合。（75+24套）数据可视化集合，75套数据可视化源码，24套数据可视化源码。大屏数据可视化集合源码案例
Echarts双对数（log）轴实现
weixin_54661092的博客
03-16 4521
项目需求 Echarts实现X轴Y轴均为对数轴。 问题描述 之前使用Echarts实现过一些类目轴（category）图表，第一次接触对数轴，查了半天文档实现如下 理想实现效果是 原因分析 Echarts中xAxis使用log轴之后，data属性不可使用，所以导致yAxis，xAxis使用统一数据源series下的data，才会形成呈直线上升的问题。 解决方案 删除xAxis中的data属性，在series中data配置二维数组。如：[[x值,y值],[x值,y值]] 因为数据全部通过计算得到，所
数据可视化-基于Pyecharts制作电商销售数据可视化图表
最新发布
m0_74394367的博客
04-22 1939
本实验通过使用Pyecharts库绘制交互式基础图形，包括柱状图、条形图、散点图、折线图和饼图，并对它们的绘制方法、特点以及配置方法进行讲解。1、柱状图和条形图：柱状图和条形图都用于显示分类数据的大小或数量之间的比较。柱状图的x轴通常表示不同的类别，而y轴表示数值，柱形的高度对应于数值的大小。条形图与柱状图类似，只是x轴和y轴的角色颠倒，横向展示。可以通过设置堆叠、簇状等方式，使图表更加直观地展示多组数据之间的对比。2、散点图散点图用于表示两个数值型变量之间的关系。
Echarts数据可视化 第7章 Echarts不同场景Dashboard制作案例 7.1 电商销售情况可视化案例
谢谢你们的关注
03-19 1179
Echarts数据可视化 第7章 Echarts不同场景Dashboard制作案例 7.1 电商销售情况可视化案例
echarts yAxis.type设置为log，某条折线数据为0时折线图显示不正常
u010234868的专栏
11-14 3919
yAxis.type = 'log'的时候，为对数解析方式，y轴坐标皆默认为10的对数方式展示，而10的对数不能为0。所以在初始化数据有0的情况下，需要换个思路。
echarts的柱状图的log轴刻度不等分
yaonierensheng的博客
03-30 3797
助力脱发，echarts帮你圆梦 在线预览echarts效果 一，随便找一个柱状图 option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value...
Echarts数据可视化图表案例+数据可视化大屏模板
06-21
18个Echarts数据可视化图表案例，每个案例都有代码注释，简单易懂。 还有三套echarts可视化大屏模板，案例下载后在编辑器内打开html，可以根据需求修改样式和数据，学习echarts绘图，也可以制作新的数据可视化大屏。
基于ECharts数据可视化大屏案例源码
12-03
基于ECharts数据可视化大屏案例源码
Vue3/ECharts5数据可视化大屏展示项目案例源码.zip
05-22
Vue3/ECharts5数据可视化（大屏展示）项目案例源码，一个基于 Vue3、Typescript、DataV、ECharts5 框架的大数据可视化（大屏展示）项目。此项目使用'.vue' 和 '.tsx' 文件实现界面，采用新版动态屏幕适配方案，全局...
Echarts数据可视化图表案例
01-11
Echarts数据可视化图表案例：包括柱图，饼图，折线图，地图等数据展示图表；案例下载后直接使用webstrom或idea打开，在编辑器内打开html
echart 横坐标取log，type为log时横坐标显示不全
weixin_43994675的博客
12-22 1172
xAxis: [ { name: "A", axisLabel: { formatter: "{value} %", interval: 0, }, }, ], 横坐标取log前 xAxis: [ { name: "A", type: ...
echarts x轴类型解析
热门推荐
qq_41818857的博客
03-10 1万+
xAxis：{ type：‘’ } type有四个值分别是： value、category、time、log ‘value’ 数值轴，适用于连续数据。例如1、2、3、4、5，如果type设置成value，那么，xAxis.data里面设置的数据无效，因为xAxis.data是为category服务的。 解决办法： ‘category’ 类目轴，适用于离散的类目数据。 ...
17Echarts - 折线图（Log Axis）
阿甘兄
04-30 1650
效果图 源代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js">&l...
echarts y轴坐标成对数增加
乖乖康少
05-15 9341
    option = {     xAxis: {         type: 'category',         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']     },     yAxis: {         type: 'log',         min:1,         logBase:3     ...
基于pyecharts时间轴组件实现动态柱形图
weixin_64378412的博客
06-14 754
pyecharts是一个基于 Python 的数据可视化库，它是echarts的 Python 封装。echarts是一个由百度开发的基于 JavaScript 的数据可视化库，它提供了丰富的图表类型和交互功能，可以帮助用户快速地创建交互式的数据可视化图表。同时pyecharts提供了一系列的 Python 接口，可以方便地使用echarts的功能来创建各种类型的图表，包括折线图、柱状图、散点图、地图等。与其他 Python 数据可视化库相比，pyecharts。
Java 基于 Apache ECharts 实现：柱状图、折线图、环形图等案例
https://gitee.com/micai-code
06-13 4179
Java 基于 Apache ECharts 实现：柱状图、折线图、环形图等案例
echarts按照时间显示柱状图_echarts时间轴和柱型图的结合
weixin_39814393的博客
01-26 1816
1 var all = {"data":[[1,1.5,0.5,1],[1,2,1.5,2],[3.5,3,2,3],[3,4,3.5,4.5],[4,6,4.5,5.5],[5.5,7,6,7.5],[6.5,7.5,6.5,7.5],[7,8.5,7.5,9],[9,9.5,9,9.5]],"provinces":["健康","意外","人寿","财险"],"years":["风险指数1"...
Echarts，每日一图——基础折线图（含异步加载数据）
four_three的博客
12-07 2948
Hi，各位同学，今天小编学会了使用Echarts画基础折线图，现在呢，就跟大家汇报一下小编的学习过程~ 首先，先让大家看一下效果：
tableau数据可视化从入门到精通,网站流量分析
01-08
想要从入门到精通Tableau数据可视化，需要掌握以下几个方面的知识和技能。 首先，了解Tableau的基本功能和操作。用户需要学习Tableau的界面布局、数据连接和导入、图表和仪表板的创建，以及如何对数据进行筛选、...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不停喝水

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值