JavaScript实现瀑布图自定义title样式echarts

最新推荐文章于 2024-05-19 09:47:39 发布
最新推荐文章于 2024-05-19 09:47:39 发布
阅读量1k 收藏 2
点赞数
分类专栏： JavaScript 文章标签： echarts javascript vscode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53326467/article/details/123699802
版权

echarts.js下载链接

提取码：qj3gicon-default.png?t=M276https://pan.baidu.com/s/1hEr_0IU1aom1Ag3hhpArTw

根据以下代码实现瀑布图，设置title样式

瀑布图数据
辅助生活费
广州03076
佛山8012275
深圳10941181
东莞635546

代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="echarts.js"></script>
</head>

<body>
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById("main"));
        mytextStyle = {
            color: "#A4D3EE",
            fontStyle: "italic",
            fontWeight: "bolder",
            fontFamily: "微软雅黑",
            fontSize: 14,
        };
        var option = {
            grid: {
                show: true,
                borderColor: '#FA8072',
            },
            title: {
                show: true,
                link:'https://www.chaoxing.com/',
                text: '不同城市消费总金额（单位:元）',
                target: 'blank',
                subtarget: 'blank',
                textAlign: 'center',
                textBaseline: "top",
                textStyle: mytextStyle,
                padding: 8,
                itemGap: 10,
                zlevel: 0,
                z: 2,
                left: '50%',
                top: '5',
                right: 'auto',
                bottom: 'auto',
                backgroundColor: '#7fb80e',
                borderColor: '#4e72b8',
                borderWidth: 3,
                shadowColor: '#b22c46',
                shadowOffsetX: 5,
                shadowOffsetY: 5,
                shadowBlur: 10
            },
            legend:{
                left:'80%',
                top:'10',
                data:['生活费']

            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow' 
                },
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                x: 'right',
                y: 'center',
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            xAxis: [
                {
                    type: 'category',
                    splitLine: { show: false },
                    axisLine:{
                        show:false
                    },
                    axisTick:{
                        show:false
                    },
                    data: ['广州', '佛山', '深圳', '东莞']
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLine:{
                        show:false
                    },
                    axisTick:{
                        show:false
                    },
                }
            ],
            series: [
                {
                    name: '辅助',
                    type: 'bar',
                    stack: '总量',
                    itemStyle: {
                        normal: {
                            barBorderColor:'transparent',
                            barBorderWidth: 2,
                            color:'transparent'
                        },
                        emphasis: {
                            barBorderColor: 'transparent',
                            barBorderWidth: 25,
                            color: 'transparent'
                        }
                    },
                    data: [0, 801, 1094, 635]
                },
                {
                    name: '生活费',
                    type: 'bar',
                    stack: '总量',
                    itemStyle: { normal: { label: { show: true, position: 'inside' } } },
                    data: [3076, 2275, 1181, 546],
                    color:'#7bbfea'
                }
            ]
        };
        myChart.setOption(option); 
    </script>
</body>

</html>

效果图

 

EBYB
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
用echarts绘制瀑布图
dongdouzin的博客
06-16 4630
瀑布图其实是柱状图的一种特例。瀑布图的核心是按照维度/指标分解，如公司收入按用途分解、公司年利润按分公司分解、业绩按销售团队分解。相对于饼图，瀑布图的优势在于：拆解项较多时，瀑布图通过数字的标记仍可清晰辨识，而饼图在分解项大于5时会不易辨别。 利用深圳月最低生活费组成数据绘制瀑布图，如图所示 绘制瀑布图与一般柱状图的代码差别不大，最为关键的代码是itemStyle代码块。itemStyle代码块设置了柱子堆叠部分或堆叠部分边框的颜色，将每根柱子堆叠部分的颜色设置为透明色。 如果需要将颜色设置成不透明，
瀑布图代码示例
ovehan的博客
03-19 688
echarts没有直接提供瀑布图这一种图表，但是可以通过柱状图的堆叠属性stack配合样式itemStyle来实现 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="./echarts4.7.0.
echarts数据视图的自定义数据展现
weixin_45926180的博客
06-27 951
根据要求，我是用的x轴的type为time，所以图表显示出来是时间格式，实际上是后端传过来的时间戳，这样可以保证时间和数据是对应的，不会因为某个时刻没有值，导致后边的值往前挪，使图表出现数据错位。通过以上配置，数据视图可以展现相关的内容表格，但是格式是不够明朗简单的，数据左侧为X轴，右侧为对应的Y轴的值。
10个Chart.js示例图表
allway2的博客
11-23 3479
Chart.js是一个功能强大的数据可视化库，但是我从经验中知道，开始并获取要显示的图形可能很棘手。各种各样的事情都可能出错，而我通常只是想让某些事情起作用，所以我可以开始进行调整。 这是一个包含10种工作图（条形图，饼图，折线图等）的列表，其中设置了颜色和数据以呈现美观的图表，您可以将其复制并粘贴到自己的项目中，并快速进行自定义和进行微调以使其适合您的风格和目的。 要使用这些示例，请确保还包括Chart.js： <script src="https://cdnjs.cloudflare....
eCharts配置项——“title”各种常用设置
最新发布
zyc_yy的博客
05-19 468
eCharts，数据可视化
e-charts自定义柱状图
Bonjours的专栏
12-24 1706
先看完成效果，是这样子的： 可以说把默认的e-charts柱状图改的7788了。 罗列出来以下几点： 1、去掉y轴（刻度值的）刻度线 2、去掉y轴（刻度值的）边框 3、改变柱状图颜色为渐变色 4、tooltip显示横坐标的值（数字）+横坐标单位（月） 5、自定义tooltip左侧小圆点 6、xy轴文字属性设置 7、y轴分割线颜色（与x轴等长的横向刻度线颜色） 8、修改x轴（...
自定义百度地图绘制echarts，地图可精确到县区，乡镇。自定义图形echarts。
10-11
百度地图绘制echarts，地图可精确到县区，乡镇自定义demo。通过百度地图坐标点，调用echarts中map方法，可参见echarts文档，最终自定义县区或乡镇图表，拥有echarts所有功能及效果。
JavaScript实现瀑布流图片效果
12-13
本文实例为大家分享了js实现瀑布流图片效果的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type=...
echarts实现词云自定义形状的示例代码
12-09
ECharts是一个基于JavaScript的数据可视化库，它提供了丰富的图表类型，包括词云图。为了实现词云自定义形状，我们需要借助ECharts的扩展插件——echarts-wordcloud。 首先，确保正确安装了ECharts和echarts-...
javascript 3D炫酷地球动画，基于echarts实现
05-10
在本项目中，我们探索了如何使用JavaScript和ECharts库创建一个3D炫酷的地球动画。ECharts是一个基于HTML5 Canvas技术的数据可视化库，它提供了丰富的图表类型和交互功能，使得开发人员能够轻松地构建出具有吸引力的...
javascript实现瀑布流动态加载图片原理
11-24
本文实例为大家分享了js瀑布流加载效果，动态...js实现瀑布流效果-动态加载图片</title> <link rel="stylesheet" href="css/waterfallflow.css" type="text/css" /> [removed][removed] </head>
hellocharts绘制瀑布图（雨图）
01-26
用hellocharts绘制频谱谱图，图可以动态刷新
echarts瀑布图_Echarts自定义瀑布图开发
weixin_35371418的博客
01-17 1563
基于Echart实现的自定义瀑布图 demo自定义测试Echart系列#root{width: 500px;height: 300px;}body{display: flex;min-height: 100vh;justify-content: center;align-items: center;}var chart = echarts.init(document.querySelector("...
Visual Studio Code (echarts)数据可视化瀑布图实现及标题的格式设置标题背景颜色以及设置副标题和标题加边框，设置边框背景和边框颜色柱形图颜色及柱形图的宽度设置完整代码
qq_45894761的博客
03-15 1781
完整代码 <!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
前端js实现瀑布图代码
TianXuab的博客
06-30 514
以上代码实现了一个简单的瀑布流布局，当窗口大小改变时，会重新计算瀑布流的布局。你可以根据自己的需求调整样式和JavaScript代码。
JS脚本自定义瀑布图
weixin_46736402的博客
10-25 211
if (data_value[i] < 0){ //判断条件，满足条件使用 di_symbol 对应的图标，否则使用option.series[N].symbol对应的图标。if (data_value[i] < 0){ //判断条件，满足条件使用 di_symbol 对应的图标，否则使用option.series[N].symbol对应的图标。option.legend[0].data[0]=['支出', '收入'];stack: '总量',stack: '总量',stack: '总量',
echarts 瀑布图（简单的k线图）
yusun1234的博客
05-07 1152
准备数据 // xianZhongFallList：[13.47, 0.11, 0.02, 0.42, 0.63, 0.59, -0.47, 0.39] // xianZhongFallXxais：['行业增速', '家用交强件数影响', '家用交强件均影响', '家用商业件数影响', '家用商业件均影响', '商用件数影响', '商用件均影响', '结构影响', '主体增速'] 主要在于先处理数据， pageInit1() { var echarts = this.$echar.
ECharts 图表标题(title)系列使用详解
热门推荐
旭东怪的博客
07-17 1万+
title 说明：图表标题 1 title.show 说明：是否显示标题组件。 默认值：true。 可选值： (1) true，显示标题。 (2) false，隐藏标题。 2 title.text 说明：主标题文本，支持使用\n换行。 默认值：'' 3 title.textStyle 说明：主标题样式。 3.1 title.textStyle.color 说明：主标题文字字体的颜色。 默认值：'#333'。 3.2 title.textSt...
前端实现js实现瀑布图代码
weixin_35756892的博客
02-16 140
以下是使用纯 JavaScript 实现瀑布图的示例代码： HTML 代码： <div id="waterfall"></div>
echarts 地图自定义图标_echarts 地图自定义图标Symbol 及其颜色
06-11
Echarts 地图组件支持自定义图标以及图标的颜色。其中，图标可以通过使用 `Symbol` 组件来定义，颜色则可以通过在数据中指定颜色值来实现。 首先，我们需要在 `option` 中定义 `Symbol` 组件，例如： ```javascript option = { ... graphic: [{ type: 'image', id: 'myIcon', // 图标 image 的 URL style: { image: 'https://echarts.apache.org/examples/data/thumb-9604.png', width: 32, height: 32 } }], ... } ``` 在上述代码中，我们定义了一个 id 为 `myIcon` 的 `image` 类型的 `Symbol` 组件，其 URL 为一个 32x32 像素的图片。 接着，我们可以在数据中指定每个点的图标以及颜色，例如： ```javascript option = { ... series: [{ type: 'map', mapType: 'china', data: [{ name: '北京', value: 100, itemStyle: { color: 'red' }, symbol: 'myIcon' }, { name: '上海', value: 50, itemStyle: { color: 'blue' }, symbol: 'myIcon' }] }] ... } ``` 在上述代码中，我们为北京和上海两个城市分别指定了图标为 `myIcon`，并且分别指定了它们的颜色为红色和蓝色。 注意，如果需要在数据中指定图标和颜色，必须将 `series.data` 设置为一个数组，并且每个元素都需要指定 `name`、`value`、`itemStyle` 和 `symbol` 属性。其中，`value` 属性表示该点的值，`itemStyle` 属性表示该点的样式，`symbol` 属性表示该点的图标。 以上就是 Echarts 地图自定义图标以及图标颜色的实现方法。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

EBYB

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

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

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

打赏作者

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

抵扣说明：

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

余额充值