Visual Studio Code (echarts)数据可视化瀑布图实现及标题的格式设置标题背景颜色以及设置副标题和标题加边框，设置边框背景和边框颜色柱形图颜色及柱形图的宽度设置完整代码

设置标题背景颜色以及设置副标题和标题加边框，

设置边框背景和边框颜色

柱形图颜色及柱形图的宽度设置完整代码

<!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>Document</title><script src="echarts.js"></script>
</head>
<body><div id="main" style="width: 800px;height:600px;"></div><script type="text/javascript">var myChart = echarts.init(document.getElementById('main'));var option = {title: {show: true, text: "不同城市消费总金额（单位：元）",  subtext:"瀑布图",  textAlign: "center",  textBaseline: "top",  padding: 5,  itemGap: 10,  zlevel: 0,z: 2,  left: "50%", top: "5",  right: "auto",  bottom: "auto", backgroundColor: "#ADFF2F", borderColor: "#ccc",  borderWidth: 2,  shadowColor: "red",  shadowOffsetX: 0, shadowOffsetY: 0,  shadowBlur: 10  },toolbox:{show:true,x:'right',feature:{dataView:{show:true,readOnly:false},restore:{show:true},saveAsImage:{show:true}}},tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'},formatter: function (params) {var tar = params[1];return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: {type: 'category',splitLine: { show: false },axisLine:{show:true,lineStyle:{color:'#008000'}},data: ['广东', '佛山', '深圳', '东莞']},yAxis: {type: 'value',axisLine:{show:true,lineStyle:{color:'#DC143C'}}},series: [{name: '辅助',type: 'bar',color:'#808000',stack: 'Total',barWidth:'50',itemStyle: {borderColor: 'transparent',color: 'transparent'},emphasis: {itemStyle: {borderColor: 'transparent',color: 'transparent'}},data: [0, 801, 1094, 635]},{name: '生活费',color:'#008000',type: 'bar',stack: 'Total',barWidth:'50',label: {show: true,position: 'inside'},data: [3076, 2275, 1181, 546]}]
};
myChart.setOption(option);</script>
</body>
</html>

效果图

Visual Studio Code (echarts)数据可视化瀑布图实现及标题的格式设置标题背景颜色以及设置副标题和标题加边框，设置边框背景和边框颜色柱形图颜色及柱形图的宽度设置完整代码相关推荐

Visual Studio Code (echarts)数据可视化，设置数据缩放区间为20到40，设置标题字体大小，颜色以及是否加粗，设置柱状图颜色
加载echarts.js,以及初始化 <!DOCTYPE html> <html lang="en"> <head><meta chars ...
Vue+Echarts数据可视化(面积图)
Vue+Echarts数据可视化(面积图) 最近公司开发需要使用Echarts来进行数据展示,稍微记录一下.先看效果图: 话不多说,直接上代码: 1.使用npm下载安装Echarts依赖(下载速度慢可 ...
ECharts数据可视化折线图
销售统计( sales )-线形图实现步骤: 寻找官方的类似示例,给予分析, 引入到HTML页面中按照需求来定制它. 第一步:寻找官方的类似示例,给予分析. 官方参考示例: 链接: Example ...
使用visual studio code调试php代码
这回使用visual studio code折腾php代码的调试,又是一顿折腾,无论如何都进不了断点.好在就要放弃使用visual studio code工具的时候,折腾好了,汗~ 这里把步骤记录下来 ...
qt5变成内部头文件 ubuntu_Ubuntu下Visual Studio Code软件的安装和使用
Visual Stuio Code 和 Source Insight 一样,都是编辑器,Visual Studio Sode 本教程以后就简称为 VSCode,VSCode 是微软出的一款编辑器,但是 ...
『C/C++养成计划』Visual Studio Code编辑器配置(外观通用型扩展Minmal)
Visual Studio Code编辑器配置(外观&通用型扩展&Minmal)! 文章目录一. vscode配置外观|通用型扩展 1.1. 色彩主题配置扩展(GitHub Them ...
Visual Studio Code设置代码自动换行
Visual Studio Code设置代码自动换行,只需两步. 第一步,打开 File 目录下的PreFerebces ,选中Settings . 第二步,在输入框搜索 editor.wrappin ...
java代码如何与界面联系在一起_如何在Visual Studio Code 中编写Java代码
本文将展示如何在Visual Studio Code中用Java编写和运行一个简单的Hello World程序. 首先您必须在本地开发环境中安装Java SE开发工具包(JDK) Visual Stu ...
GitHub+jsDelivr+PicGo+Visual Studio Code 打造稳定、快速、高效、免费图床
该文章的最新版本已迁移至个人博客[比特飞],单击链接:GitHub+jsDelivr+PicGo+Visual Studio Code 打造稳定.快速.高效.免费图床 | .Net中文网. 前言本文 ...

Visual Studio Code (echarts)数据可视化瀑布图实现及标题的格式设置标题背景颜色以及设置副标题和标题加边框，设置边框背景和边框颜色柱形图颜色及柱形图的宽度设置完整代码

Visual Studio Code (echarts)数据可视化瀑布图实现及标题的格式设置标题背景颜色以及设置副标题和标题加边框，设置边框背景和边框颜色柱形图颜色及柱形图的宽度设置完整代码相关推荐

最新文章

热门文章