【HZHE003】黄子涵学习Echarts

已于 2022-03-26 23:02:20 修改
阅读量980 收藏
点赞数
分类专栏： Echarts 文章标签： 前端
于 2022-03-26 22:57:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15299517/article/details/123765836
版权

概念篇

ECharts 中的样式简介

本文主要是大略概述，用哪些方法，可以在 Apache EChartsTM 中设置样式，改变图形元素或者文字的颜色、明暗、大小等。

本文介绍这几种方式，他们的功能范畴可能会有交叉（即同一种细节的效果可能可以用不同的方式实现），但是他们各有各的场景偏好。

  • 颜色主题（Theme）
  • 调色盘
  • 直接样式设置（itemStyle、lineStyle、areaStyle、label、…）
  • 视觉映射（visualMap）

颜色主题（Theme）

最简单的更改全局样式的方式，是直接采用颜色主题（theme）。例如，在 示例集合 中，可以通过切换深色模式，直接看到采用主题的效果。

ECharts5 除了一贯的默认主题外，还内置了'dark'主题。可以像这样切换成深色模式：

<!DOCTYPE html>
<html lang="zh">

<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>
    <script src="echarts.js"></script>
</head>

<body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="huangzihan" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var HZHChart = echarts.init(document.getElementById('huangzihan'),'dark');

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '黄子涵ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['黄子涵']
            },
            xAxis: {
                data: ['HZH1', 'HZH2', 'HZH3', 'HZH4', 'HZH5', 'HZH6']
            },
            yAxis: {},
            series: [
                {
                    name: '黄子涵',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        HZHChart.setOption(option);
    </script>
    </script>
</body>

</html>

直接采用颜色主题（theme）

其他的主题，没有内置在 ECharts 中，需要自己加载。这些主题可以在 主题编辑器 里访问到。

主题编辑器

也可以使用这个主题编辑器，自己编辑主题。

下载下来的主题可以这样使用：

JS文件方式

如果主题保存为 JS 文件，例如：

  1. 下载或复制以下的主题保存至 *.js 文件；
  2. 将该文件在 HTML 中引用；
  3. 使用 echarts.init(dom, 'westeros') 创建图表，第二个参数即为 *.js 文件中注册的主题名字。
<!DOCTYPE html>
<html lang="zh">

<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>
    <script src="echarts.js"></script>
    <script src="westeros.js"></script>
</head>

<body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="huangzihan" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var HZHChart = echarts.init(document.getElementById('huangzihan'),'westeros');

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '黄子涵ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['黄子涵']
            },
            xAxis: {
                data: ['HZH1', 'HZH2', 'HZH3', 'HZH4', 'HZH5', 'HZH6']
            },
            yAxis: {},
            series: [
                {
                    name: '黄子涵',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        HZHChart.setOption(option);
    </script>
    </script>
</body>

</html>

image

JSON 文件（暂时还不会）

如果主题保存为 JSON 文件，则需要自行加载和注册，例如：

  1. 下载或复制以下的主题保存至 *.json 文件；
  2. 读取该 JSON 文件，并使用 obj = JSON.parse(data) 将其转换成对象；
  3. 调用 echarts.registerTheme('walden', obj) 注册主题；
  4. 使用 echarts.init(dom, 'walden') 创建图表，第二个参数即为刚才注册的主题名字。
// 假设主题名称是 "vintage"
$.getJSON('xxx/xxx/vintage.json', function(themeJSON) {
  echarts.registerTheme('vintage', JSON.parse(themeJSON));
  var chart = echarts.init(dom, 'vintage');
});
UMD 格式的 JS 文件

如果保存为 UMD 格式的 JS 文件，文件内部已经做了自注册，直接引入 JS 即可：

<!DOCTYPE html>
<html lang="zh">

<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>
    <script src="echarts.js"></script>
    <script src="walden.js"></script>
</head>

<body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="huangzihan" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var HZHChart = echarts.init(document.getElementById('huangzihan'),'walden');

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '黄子涵ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['黄子涵']
            },
            xAxis: {
                data: ['HZH1', 'HZH2', 'HZH3', 'HZH4', 'HZH5', 'HZH6']
            },
            yAxis: {},
            series: [
                {
                    name: '黄子涵',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        HZHChart.setOption(option);
    </script>
    </script>
</body>

</html>

UMD 格式的 JS 文件

调色盘

调色盘，可以在 option 中设置。它给定了一组颜色，图形、系列会自动从其中选择颜色。 可以设置全局的调色盘，

<!DOCTYPE html>
<html lang="zh">

<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>
    <script src="echarts.js"></script>
</head>

<body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="huangzihan" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var HZHChart = echarts.init(document.getElementById('huangzihan'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '黄子涵ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['黄子涵']
            },
            xAxis: {
                data: ['HZH1', 'HZH2', 'HZH3', 'HZH4', 'HZH5', 'HZH6']
            },
            yAxis: {},
            series: [
                {
                    name: '黄子涵',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20],
                },

            ],
            color: [
                '#c23531',
                '#2f4554',
                '#61a0a8',
                '#d48265',
                '#91c7ae',
                '#749f83',
                '#ca8622',
                '#bda29a',
                '#6e7074',
                '#546570',
                '#c4ccd3'
            ],
        };

        // 使用刚指定的配置项和数据显示图表。
        HZHChart.setOption(option);
    </script>
    </script>
</body>

</html>

全局的调色盘

也可以设置系列自己专属的调色盘。

<!DOCTYPE html>
<html lang="zh">

<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>
    <script src="echarts.js"></script>
</head>

<body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="huangzihan" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var HZHChart = echarts.init(document.getElementById('huangzihan'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '黄子涵ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['黄子涵']
            },
            xAxis: {
                data: ['HZH1', 'HZH2', 'HZH3', 'HZH4', 'HZH5', 'HZH6']
            },
            yAxis: {},
            series: [
                {
                    name: '黄子涵',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20],

                    type: 'bar',
                    // 此系列自己的调色盘。
                    color: [
                        '#dd6b66',
                        '#759aa0',
                        '#e69d87',
                        '#8dc1a9',
                        '#ea7e53',
                        '#eedd78',
                        '#73a373',
                        '#73b9bc',
                        '#7289ab',
                        '#91ca8c',
                        '#f49f42'
                    ]
                },

            ],
        };

        // 使用刚指定的配置项和数据显示图表。
        HZHChart.setOption(option);
    </script>
    </script>
</body>

</html>

自己专属的调色盘

直接的样式设置 itemStyle, lineStyle, areaStyle, label, …

直接的样式设置是比较常用设置方式。纵观 ECharts 的 option 中，很多地方可以设置 itemStyle、lineStyle、areaStyle、label等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。

一般来说，ECharts 的各个系列和组件，都遵从这些命名习惯，虽然不同图表和组件中，itemStyle、label 等可能出现在不同的地方。

在下面例子中我们给气泡图设置了阴影，渐变色等复杂的样式，你可以修改代码中的样式看修改后的效果：

实例代码
<!DOCTYPE html>
<html lang="zh">

<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>
    <script src="echarts.js"></script>
</head>

<body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="huangzihan" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var HZHChart = echarts.init(document.getElementById('huangzihan'));
        var data = [
            [
                [28604, 77, 17096869, 'Australia', 1990],
                [31163, 77.4, 27662440, 'Canada', 1990],
                [1516, 68, 1154605773, 'China', 1990],
                [13670, 74.7, 10582082, 'Cuba', 1990],
                [28599, 75, 4986705, 'Finland', 1990],
                [29476, 77.1, 56943299, 'France', 1990],
                [31476, 75.4, 78958237, 'Germany', 1990],
                [28666, 78.1, 254830, 'Iceland', 1990],
                [1777, 57.7, 870601776, 'India', 1990],
                [29550, 79.1, 122249285, 'Japan', 1990],
                [2076, 67.9, 20194354, 'North Korea', 1990],
                [12087, 72, 42972254, 'South Korea', 1990],
                [24021, 75.4, 3397534, 'New Zealand', 1990],
                [43296, 76.8, 4240375, 'Norway', 1990],
                [10088, 70.8, 38195258, 'Poland', 1990],
                [19349, 69.6, 147568552, 'Russia', 1990],
                [10670, 67.3, 53994605, 'Turkey', 1990],
                [26424, 75.7, 57110117, 'United Kingdom', 1990],
                [37062, 75.4, 252847810, 'United States', 1990]
            ],
            [
                [44056, 81.8, 23968973, 'Australia', 2015],
                [43294, 81.7, 35939927, 'Canada', 2015],
                [13334, 76.9, 1376048943, 'China', 2015],
                [21291, 78.5, 11389562, 'Cuba', 2015],
                [38923, 80.8, 5503457, 'Finland', 2015],
                [37599, 81.9, 64395345, 'France', 2015],
                [44053, 81.1, 80688545, 'Germany', 2015],
                [42182, 82.8, 329425, 'Iceland', 2015],
                [5903, 66.8, 1311050527, 'India', 2015],
                [36162, 83.5, 126573481, 'Japan', 2015],
                [1390, 71.4, 25155317, 'North Korea', 2015],
                [34644, 80.7, 50293439, 'South Korea', 2015],
                [34186, 80.6, 4528526, 'New Zealand', 2015],
                [64304, 81.6, 5210967, 'Norway', 2015],
                [24787, 77.3, 38611794, 'Poland', 2015],
                [23038, 73.13, 143456918, 'Russia', 2015],
                [19360, 76.5, 78665830, 'Turkey', 2015],
                [38225, 81.4, 64715810, 'United Kingdom', 2015],
                [53354, 79.1, 321773631, 'United States', 2015]
            ]
        ];
        // 指定图表的配置项和数据
        var option = {
            backgroundColor: {
                type: 'radial',
                x: 0.3,
                y: 0.3,
                r: 0.8,
                colorStops: [
                    {
                        offset: 0,
                        color: '#f7f8fa'
                    },
                    {
                        offset: 1,
                        color: '#cdd0d5'
                    }
                ]
            },
            grid: {
                left: 10,
                containLabel: true,
                bottom: 10,
                top: 10,
                right: 30
            },
            xAxis: {
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                splitLine: {
                    show: false
                },
                scale: true
            },
            series: [
                {
                    name: '1990',
                    data: data[0],
                    type: 'scatter',
                    symbolSize: function (data) {
                        return Math.sqrt(data[2]) / 5e2;
                    },
                    emphasis: {
                        focus: 'series',
                        label: {
                            show: true,
                            formatter: function (param) {
                                return param.data[3];
                            },
                            position: 'top'
                        }
                    },
                    itemStyle: {
                        shadowBlur: 10,
                        shadowColor: 'rgba(120, 36, 50, 0.5)',
                        shadowOffsetY: 5,
                        color: {
                            type: 'radial',
                            x: 0.4,
                            y: 0.3,
                            r: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: 'rgb(251, 118, 123)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgb(204, 46, 72)'
                                }
                            ]
                        }
                    }
                },
                {
                    name: '2015',
                    data: data[1],
                    type: 'scatter',
                    symbolSize: function (data) {
                        return Math.sqrt(data[2]) / 5e2;
                    },
                    emphasis: {
                        focus: 'series',
                        label: {
                            show: true,
                            formatter: function (param) {
                                return param.data[3];
                            },
                            position: 'top'
                        }
                    },
                    itemStyle: {
                        shadowBlur: 10,
                        shadowColor: 'rgba(25, 100, 150, 0.5)',
                        shadowOffsetY: 5,
                        color: {
                            type: 'radial',
                            x: 0.4,
                            y: 0.3,
                            r: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: 'rgb(129, 227, 238)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgb(25, 183, 207)'
                                }
                            ]
                        }
                    }
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        HZHChart.setOption(option);
    </script>
    </script>
</body>

</html>
实例效果

直接的样式设置

高亮的样式：emphasis

在鼠标悬浮到图形元素上时，一般会出现高亮的样式。默认情况下，高亮的样式是根据普通样式自动生成的。但是高亮的样式也可以自己定义，主要是通过 emphasis 属性来定制。emphasis 中的结构，和普通样式的结构相同，例如：

option = {
  series: {
    type: 'scatter',

    // 普通样式。
    itemStyle: {
      // 点的颜色。
      color: 'red'
    },
    label: {
      show: true,
      // 标签的文字。
      formatter: 'This is a normal label.'
    },

    // 高亮样式。
    emphasis: {
      itemStyle: {
        // 高亮时点的颜色。
        color: 'blue'
      },
      label: {
        show: true,
        // 高亮时标签的文字。
        formatter: 'This is a emphasis label.'
      }
    }
  }
};

通过 visualMap 组件设定样式

visualMap 组件 组件 能指定数据到颜色、图形尺寸的映射规则，详见 数据的视觉映射。

黃子涵
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javaScript中return的用法
Walden_tinghou的专栏
05-22 968
1定义　　   　　　　return，从字面意思来看就是返回，官方定义return语句将终止当前函数并返回当前函数的值；可以看下下面的示例代码： 1 DOCTYPE html> 2 html lang="en"> 3 head> 4 meta charset="UTF-8"> 5 title>Titletitle> 6 script>
vue中使用echarts绘制折线图
热门推荐
halo1416的博客
07-25 3万+
1. 安装：npm install echarts --save ==>> 其他方式请参考：https://www.echartsjs.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts 2. 页面中使用 2.1 引入：import echarts from 'echarts'...
可视化 | Echarts基础&异步加载数据&交互组件&数据集
go
08-17 2053
目录ECharts 简介ECharts 安装ECharts 配置语法ECharts 图饼ECharts 样式设置ECharts 异步加载数据ECharts 数据集ECharts 交互组件 ECharts 简介 ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求，遵循 Apache-2.0 开源协议，免费商用，ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备，可展示各类图表。 ECha
设置header，实现跨域访问
zyb2010yaonuli的博客
02-27 7236
受浏览器的同源策略限制，JavaSript只能请求本域内的资源。跨域资源共享(Cross-Origin Resource Sharing, CORS)是为解决Ajax技术难实现跨域问题而提出的一个规范，这个规范试着从根本上解决安全的跨域资源共享问题。在此之前，解决此类问题的途径往往是服务器代理、JSONP等，治标不治本。目前基本所有浏览器都已经支持该规范。 一个域是由schema、host、...
echarts 自定义主题
weixin_43931625的博客
11-03 3973
echarts 自定义主题
vue + echarts实现数据可视化统计页面
LINGK98的博客
08-02 8718
1、该项目自行下载element-ui、moment、echarts等vue的相关依赖包； 2、该项目里面的echarts样式主题“walden.js”是个人自己配置的样式，可到官网自行配置或者选择默认样式； 先上效果图： 标数据可视化网页 代码参考： 三个echarts子组件（比较懒，子组件代码就做出一个组件画一张图，可以通过JavaScript对dom元素进行操作实现一组件画多图的效果，以后会考虑写一下） chart1.v...
echarts 学习笔记【6】大屏
不知名人士的博客
04-25 555
Echarts 学习之《大屏》
【Echarts】设置主题、扇形格式化
weixin_30457551的博客
10-18 368
var myCooky = echarts.init(document.getElementById('cooky'),'walden'); walden是主题名称：具体可以在官网定制http://echarts.baidu.com/theme-builder/ cooky_option = { title: { text: '占比分析' ...
echart 实现环形图
最新发布
weixin_40597855的博客
04-19 256
echart 实现环形图。
Python数据可视化-Pyecharts不同的主题风格
grfstc的博客
05-16 3157
本文介绍 PyEcharts主题风格配置 内容，通过内置提供了 10+ 种不同的风格，另外也提供了便捷的定制主题的方法。 Echarts 是一个由百度开源的数据可视化，凭借着良好的交互性，精巧的图表设计，得到了众多开发者的认可。而 Python 是一门富有表达力的语言，很适合用于数据处理。当数据分析遇上数据可视化时，pyecharts 诞生了。 案例中的代码内容基于 Pyecharts 1.9.1 版本 。 C:\PythonXXX\Lib\site-packages\pyecharts\global
vue3项目--echarts自定义主题
weixin_62902737的博客
03-01 389
vue3项目---echarts自定义主题
Echarts 学习系列(3)-Echarts动态数据交互
weixin_30875157的博客
08-16 373
写在前面 上一小节，我们总结了折线(面积)图、柱状(条形)图、饼（圆环）图类型的图表。 但是，都是静态的。接下来的，这一小节，总结的是Echarts 动态数据的交换。 前置条件 开发环境：win10 家庭版 开发工具：Visual Studio 2019 数据库：MySQL 数据连接工具：Navicat Premium 使用技术：.Net Mvc+Dapper 创建数据库 //创建...
安装Vue.js脚手架 vue-cli
Walden_tinghou的专栏
11-30 1461
1.首先来到Vue.js的gthub页面 点击Vue-ci https://github.com/vuejs/vue https://github.com/vuejs/vue-cli 照着readme一路敲就好 tinghou$ vue init webpack vuetestdemo ? Project name vuetest
用js给div绑定事件，实现点击切换效果的几种方式总结
Walden_tinghou的专栏
05-18 1万+
用js给div绑定事件，实现点击切换效果，总结有如下几种方式 script type="text/javascript"> function btnAction() { var titleNValue = document.getElementById("titleN").value; var complaintValue = document.getElem
webstorm安装Vue插件及添加vue模板支持
Walden_tinghou的专栏
12-01 1万+
1.安装Vue插件 enable node和NPM 2.设置Vue模板支持 自定义模板代码         export default{        props:[]     }
angularjs通过指令方式引用echarts
总结，交流，记录，成长
11-29 748
index.html引入 &lt;script src="lib/echarts//echarts.js"&gt;&lt;/script&gt; &lt;script src="lib/echarts/walden.js"&gt;&lt;/script&gt; directive.js 指令含饼图，柱图，折线图 .directive('pieCharts', function(...
echart渲染
joan_yb的博客
06-28 638
echart渲染
echarts 饼图动态赋值
zhouyuqi1的博客
12-09 1万+
原 $sql2 = “SELECT lg.name,count(lg.name) as lgnumber from lt_gchannel as lg LEFT JOIN lt_player as lp on lg.id = lp.gchannel_id GROUP BY lg.name“; $result = db::query($sql2); var test = { t
echarts图表引入主题样式（js和json）
陈小陈的博客
01-24 3182
echarts主题样式 主题样式构建工具 下载主题 引入echarts主题样式有两种方法：js和json 引入主题 引入js主题文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>主题样式</title> <style> #main{ margin: 20p
tab切换重新渲染Echarts图表
Lewis_1993的博客
06-03 1万+
这里为了方便，使用下拉列表代替tab切换 HTML代码<select id="selectID"> <option value="day">按天</option> <option value="week">按周</option> <option value="month">按月</option> </select> <div id="main" style="width: 6

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值