Visual Studio Code (echarts)数据可视化，设置数据缩放区间为20到40，设置标题字体大小，颜色以及是否加粗，设置柱状图颜色

加载echarts.js,以及初始化

<!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'));

设置标题

字体颜色，大小，格式，粗细

 title: {show: true, text: "销售经理能力对比分析",left: 'center',textStyle:{color:'#FF0000',fontStyle:'normal',fontWeight:'normal',fontFamily:'sans-serif',fontSize:20}},

设置小组件

 toolbox: {  show: true,feature: {mark: { show: true }, dataView: { show: true, readOnly: false },magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },restore: { show: true }, saveAsImage: { show: true }}},

设置X,Y轴

xAxis: { data: ['销售', '沟通', '服务', '协作', '培训', '组织']},yAxis: {type: 'value'},

设置缩放区间

 dataZoom:{show:true,realtime:true,start:20,end:40},

完整代码

<!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: "销售经理能力对比分析",left: 'center',textStyle:{color:'#FF0000',fontStyle:'normal',fontWeight:'normal',fontFamily:'sans-serif',fontSize:20}},toolbox: {  show: true,feature: {mark: { show: true }, dataView: { show: true, readOnly: false },magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },restore: { show: true }, saveAsImage: { show: true }}},calculable: true,xAxis: { data: ['销售', '沟通', '服务', '协作', '培训', '组织']},yAxis: {type: 'value'},tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},legend: {left:'left',top: '5%',itemGap:100},dataZoom:{show:true,realtime:true,start:20,end:40},series: [  {   name: '王斌', type: 'bar',data: [87.5, 87.5, 90, 91.25, 85, 87.5],color:'#dd6b66'},{   name: '刘倩', type: 'bar',data: [90, 88.75, 85, 87.5, 88.75, 91.25],color:'#759aa0'},{  name: '袁波', type: 'bar',data: [92.5, 91.25,88.75,92.5,91.25,88.75],color:'#e69d87'},]};myChart.setOption(option);</script>
</body>
</html>

结果图

代码截图

Visual Studio Code (echarts)数据可视化，设置数据缩放区间为20到40，设置标题字体大小，颜色以及是否加粗，设置柱状图颜色相关推荐

Visual Studio Code (echarts)数据可视化瀑布图实现及标题的格式设置标题背景颜色以及设置副标题和标题加边框，设置边框背景和边框颜色柱形图颜色及柱形图的宽度设置完整代码
设置标题背景颜色以及设置副标题和标题加边框, 设置边框背景和边框颜色柱形图颜色及柱形图的宽度设置完整代码 <!DOCTYPE html> <html lang="en&q ...
Visual Studio Code是什么
Visual Studio Code 是一个由微软开发,同时支持 Windows . Linux 和 macOS 等操作系统且开放源代码的代码编辑器,它支持测试,并内置了 Git 版本控制功能,同时也 ...
visual studio code搭建Java环境 - 一步一个脚印详细教程
visual studio code搭建Java环境一.软件安装二.添加环境变量三.vscode配置 1.软件本身设置 2.编译环境配置后记一.软件安装 visual studio code ...
3d饼图 vue_Vue+Echarts构建可视化大数据平台实战项目分享（附源码）(上)
前言分享之前我们先来普及一下什么是数据可视化?数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理.数据可视化通俗来说就是:数据的展示.处理和分析.目的是借助于图形化手段,清晰有 ...
Vue+Echarts构建可视化大数据平台实战项目（上）粒子动效，登录界面抖动，背景图轮播★
Vue+Echarts构建可视化大数据平台实战项目(上) 前言分享之前我们先来普及一下什么是数据可视化?数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理.数据可视化通俗来说就 ...
（上）Vue+Echarts构建可视化大数据平台实战项目分享（附源码）
前言分享之前我们先来普及一下什么是数据可视化?数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理.数据可视化通俗来说就是:数据的展示.处理和分析.目的是借助于图形化手段,清晰有 ...
Visual Studio Code的用户设置相关
快捷键ctrl ,打开设置,或者在命令提示行里,输入open settings: workspace setting: located under the .vscode folder in your ...
Visual Studio Code设置断点时出现Unverified breakpoint该咋办
有的时候在Visual Studio Code里选中某一行设置断点,发现代码行号前面的圆圈是空心的, 而期望的断点设置成功后,显示是这样的: 空心的圆圈前面弹出的提示"Unverified ...
将Visual Studio Code设置为jshell中的默认编辑器
Java Shell( jshell )是用于在Java中学习和进行原型制作的交互式工具. 它是在Java 9中引入的,从那以后,我在演示过程中偶尔使用它来进行一些快速原型制作,或者只是为了验证Jav ...

Visual Studio Code (echarts)数据可视化，设置数据缩放区间为20到40，设置标题字体大小，颜色以及是否加粗，设置柱状图颜色

Visual Studio Code (echarts)数据可视化，设置数据缩放区间为20到40，设置标题字体大小，颜色以及是否加粗，设置柱状图颜色相关推荐

最新文章

热门文章