Echars学习笔记(后续接着更新)

news/2024/3/29 20:44:31/文章来源:https://blog.csdn.net/qq_52845451/article/details/129704086

Vue引入Echars

vue2

全局引入

  1. 首先进行Echars安装
npm install echarts --save
  1. 然后在需要的文件中引入 / 或者直接main.js中挂载到Vue原型链上
// 1. 使用的文件中引入
import * as echarts from 'echarts'    // 2. mian.js  直接把echarts挂载到vue实例上
import * as echarts from 'echarts'
// 把echarts挂载到全局(使用:this.$echarts 即可)
Vue.prototype.$echarts = echarts
  1. 设置一个容器(容器至少要有高!)
<divref="box"style="width: 600px; height: 300px; border: 1px solid red"
></div>
  1. 初始化echarts实例
// 1. 使用的文件中引入
var myChart = echarts.init(this.$refs.box)// 2. mian.js  直接把echarts挂载到vue实例上
var myChart = this.$echarts.init(this.$refs.box)
  1. 进行配置并使用
myChart.setOption({// 标题  title: {text: 'ECharts 入门示例',},// 提示框tooltip: {},// x轴  xAxis: {// x轴数据源  data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],},// y轴  yAxis: {},// 系列 设置当前数据映射的图形series: [{name: '销量',// 指定图形类型  type: 'bar',// 图形数据源  data: [5, 20, 36, 10, 10, 20],},],
})
vue3

title属性

  • 标题组件,包含主标题和副标题
text:‘’
  • 主标题文本,支持使用 \n 换行,取值string
title: {text: '主标题文本',
},
link:‘’
  • 主标题文本超链接,指定跳转的url,默认新窗口打开
title: {text: '主标题文本', // 主文本标题link: 'http://www.baidu.com', // 主标题文本超链接
},
targer: ‘’
  • 链接打开方式,默认新窗口打开blank
textStyle:{}
  • 设置主标题文字的样式
title: {text: 'ECharts 入门示例', // 主文本标题link: 'http://www.baidu.com', // 主标题文本超链接// 设置主标题文字的样式textStyle: {color: 'skyblue', // 颜色fontStyle: 'italic', // 文字风格(正常/倾斜)fontWeight: '300', // 文字粗细fontSize: '20', // 字号// ...    },
},
backgroundColor:‘’
  • 标题背景色,默认透明
title: {text: 'ECharts 入门示例', // 主文本标题link: 'http://www.baidu.com', // 主标题文本超链接// 设置主标题文字的样式textStyle: {color: 'skyblue', // 颜色fontStyle: 'italic', // 文字风格(正常/倾斜)fontWeight: '300', // 文字粗细fontSize: '20', // 字号},backgroundColor: 'pink', // 标题背景颜色
},
borderColor:‘’
  • 标题的边框颜色
title: {text: 'ECharts 入门示例', // 主文本标题link: 'http://www.baidu.com', // 主标题文本超链接// 设置主标题文字的样式textStyle: {color: 'skyblue', // 颜色fontStyle: 'italic', // 文字风格(正常/倾斜)fontWeight: '300', // 文字粗细fontSize: '20', // 字号},backgroundColor: 'pink', // 标题背景颜色borderColor: '#ccc', // 标题边框颜色
},
borderWidth:0
  • 标题的边框线宽
title: {text: 'ECharts 入门示例', // 主文本标题link: 'http://www.baidu.com', // 主标题文本超链接// 设置主标题文字的样式textStyle: {color: 'skyblue', // 颜色fontStyle: 'italic', // 文字风格(正常/倾斜)fontWeight: '300', // 文字粗细fontSize: '20', // 字号},backgroundColor: 'pink', // 标题背景颜色borderColor: '#ccc', // 标题边框颜色borderWidth: 10, // 标题边框宽度
},
x:‘’
  • 主文本和副文本在盒子中的对齐方式
title: {text: 'ECharts 入门示例', // 主文本标题link: 'http://www.baidu.com', // 主标题文本超链接// 设置主标题文字的样式textStyle: {color: 'skyblue', // 颜色fontStyle: 'italic', // 文字风格(正常/倾斜)fontWeight: '300', // 文字粗细fontSize: '20', // 字号},backgroundColor: 'pink', // 标题背景颜色borderColor: '#ccc', // 标题边框颜色borderWidth: 10, // 标题边框宽度x: 'center', // 主文本和副文本在盒子中的对齐方式},
subtext:‘’
  • 副标题文本,支持使用 \n 换行
  • 副文本样式设置同主标题
title: {text: 'ECharts 入门示例', // 主文本标题link: 'http://www.baidu.com', // 主标题文本超链接// 设置主标题文字的样式textStyle: {color: 'skyblue', // 颜色fontStyle: 'italic', // 文字风格(正常/倾斜)fontWeight: '300', // 文字粗细fontSize: '20', // 字号},backgroundColor: 'pink', // 标题背景颜色borderColor: '#ccc', // 标题边框颜色borderWidth: 10, // 标题边框宽度x: 'center', // 主文本和副文本在盒子中的对齐方式subtext: '副标题文本', // 副标题文本,支持使用 \n 换行},

tooltip

  • 提示框组件,鼠标经过时候的提示
trigger:‘’
  • 触发类型,取值有'item'(默认),'axis''none'
    • 'item',数据项图形触发,主要在散点图,饼图等无类目轴(x轴y轴)的图表中使用
    • 'axis'坐标轴触发,主要在柱状图,折线图等会使用类目轴(x轴y轴)的图表中使用
    • 'none',什么都不触发
// 提示框(鼠标经过时候的提示)
tooltip: {trigger: 'axis', // 触发类型,坐标轴触发
},
axisPointer:{} 指示器
  • 坐标轴指示器配置项,坐标轴指示器是指示坐标轴当前刻度的工具

type

  • 指示器类型,'line' 直线指示器(默认),'shadow' 阴影指示器,'none' 无指示器,'cross' 十字准星指示器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RCexcw0p-1679451582979)(C:\Users\huihui\Desktop\echars\最新\截图\线性(line)]指示器.png)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xVOAsGKx-1679451582980)(C:\Users\huihui\Desktop\echars\最新\截图\阴影(shadow)]指示器.png)

其他同理

// 提示框(鼠标经过时候的提示)
tooltip: {trigger: 'axis', // 触发类型,坐标轴触发// 坐标轴指示器配置项axisPointer: {// 指示器形式type: 'shadow',}
},
showContent:boolean
  • 是否显示提示框浮层,默认显示。只需tooltip触发事件或显示axisPointer而不需要显示内容时可配置该项为false

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VTxYfhKB-1679451582981)(C:\Users\huihui\Desktop\echars\最新\截图\悬浮框.png)]

// 提示框(鼠标经过时候的提示)
tooltip: {trigger: 'axis', // 触发类型,坐标轴触发// 坐标轴指示器配置项axisPointer: {// 指示器形式type: 'shadow',},// 是否显示提示框浮层(鼠标经过显示的提示框),默认显示showContent: false,
},
backgroundColor:‘’
  • 提示框浮层的背景颜色
tooltip: {trigger: 'axis', // 触发类型,坐标轴触发// 坐标轴指示器配置项axisPointer: {// 指示器形式type: 'shadow',},// 是否显示提示框浮层(鼠标经过显示的提示框),默认显示// showContent: false,backgroundColor: 'skyblue',
},
borderColor:‘’
  • 提示框浮层的边框颜色
tooltip: {trigger: 'axis', // 触发类型,坐标轴触发// 坐标轴指示器配置项axisPointer: {// 指示器形式type: 'shadow',},// 是否显示提示框浮层(鼠标经过显示的提示框),默认显示// showContent: false,backgroundColor: 'skyblue', // 提示框浮层的背景颜色borderColor: '#ccc', // 提示框浮层的边框颜色
},
borderWidth:‘’
  • 提示框浮层的边框宽
tooltip: {trigger: 'axis', // 触发类型,坐标轴触发// 坐标轴指示器配置项axisPointer: {// 指示器形式type: 'shadow',},// 是否显示提示框浮层(鼠标经过显示的提示框),默认显示// showContent: false,backgroundColor: 'skyblue', // 提示框浮层的背景颜色borderColor: 'red', // 提示框浮层的边框颜色borderWidth: 10, // 提示框浮层的边框宽
},
textStyle:{}
  • 提示框浮层的文本样式
tooltip: {trigger: 'axis', // 触发类型,坐标轴触发// 坐标轴指示器配置项axisPointer: {// 指示器形式type: 'shadow',},// 是否显示提示框浮层(鼠标经过显示的提示框),默认显示// showContent: false,backgroundColor: 'skyblue', // 提示框浮层的背景颜色borderColor: 'red', // 提示框浮层的边框颜色borderWidth: 10, // 提示框浮层的边框宽// 提示框浮层的文本样式textStyle: {color: 'white', // 提示框浮层文字颜色fontStyle: 'italic', // 提示框浮层文字样式fontWeight: 'bolder', // 提示框浮层文字字体的粗细fontSize: 16, // 提示框浮层文字字体大小},
},
自定义提示框浮层formatter:‘’ / fun
  • 提示框浮层内容格式器,支持字符串模板和回调函数两种形式

字符串形式

  • a代表series系列图标名称
  • b代表series数据名称data里面的name
  • c代表series数据值data里面的value
  • d代表 当前数据/总数 的比例
formatter: '{a} <br/>{b} : {c} ({d}%)'

函数形式

  • 第一个参数就是数据源,里面的data是我们需要的数据(在seriesdata属性设置的)

  • return 的东西就是提示框浮层的内容

  // 提示框(鼠标经过时候的提示)tooltip: {trigger: 'axis', // 触发类型,坐标轴触发// 坐标轴指示器配置项axisPointer: {// 指示器形式type: 'shadow',},// 是否显示提示框浮层(鼠标经过显示的提示框),默认显示// showContent: false,backgroundColor: 'skyblue', // 提示框浮层的背景颜色borderColor: 'red', // 提示框浮层的边框颜色borderWidth: 10, // 提示框浮层的边框宽// 提示框浮层的文本样式textStyle: {color: 'white', // 提示框浮层文字颜色fontStyle: 'italic', // 提示框浮层文字样式fontWeight: 'bolder', // 提示框浮层文字字体的粗细fontSize: 16, // 提示框浮层文字字体大小},// 提示框浮层内容格式器,支持字符串模板和回调函数两种形式formatter(params, ticket, callback) {// console.log(params[0].data) // params是数据源// console.log(ticket)// console.log(callback)// return 的东西就是提示框浮层的内容return ('数量:' + params[0].data.value + '-日期:' + params[0].data.data)},},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],},yAxis: {},// 系列 设置当前数据映射的图形series: [{name: '销量',type: 'bar',data: [// 设置提示框的formatter之后,就可以自定义数据了,不设置当然也能定义数据{value: '5',data: '2023-01-01',},{value: '15',data: '2023-01-02',},{value: '25',data: '2023-01-03',},{value: '35',data: '2023-01-04',},{value: '45',data: '2023-01-05',},{value: '55',data: '2023-01-10',},],},],

legend

  • 图例组件
  • 图例组件展现了不同系列的标记(symbol),颜色和名字。可以通过点击图例控制哪些系列不显示
show:boolean
  • 设置图例开启或者关闭
legend: {show: true,
},
icon:‘’
  • 图例项的 icon
legend: {show: true,icon: 'circle',
},
top:string / % / number
  • 位置,leftrightbottom同理
legend: {show: true, // 是否显示icon: 'circle', // 图标,图形形状top: 20, // 位置
},
itemWidth:number | itemHeight:number
  • 图例标记的图形宽度高度
legend: {show: true, // 是否显示// icon: 'circle', // 图标,图形形状top: 20, // 位置// 图例宽高itemWidth: 50,itemHeight: 20,
},
textStyle:{}
  • 图例的公用文本样式
![类目轴](C:\Users\huihui\Desktop\echars\最新\截图\类目轴.png)legend: {show: true, // 是否显示// icon: 'circle', // 图标,图形形状top: 20, // 位置// 图例宽高itemWidth: 50,itemHeight: 20,// 图例的公用文本样式textStyle: {color: 'pink', // 颜色backgroundColor: 'skyblue', // 背景颜色fontSize: 18,},
},

xAxis

  • 直角坐标系 grid 中的 x 轴,一般情况下单个 grid 组件最多只能放上下两个 x 轴,多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠
data
  • x轴数据源
xAxis: {data: xData,
},
type
  • 坐标轴类型(常用的就前两个)

'value' 数值轴,适用于连续数据,例如连续的纯数据(1,2,3,…)

'category' 类目轴,适用于离散的类目数据,例如分成一类的东西(春夏秋冬,星期,国家…),为该类型时必须通过data设置类目数据

'time' 时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度

'log' 对数轴。适用于对数数据

xAxis: {type: 'category',data: xData,
},
boundaryGap
  • 坐标轴两边留白策略,类目轴和非类目轴的设置和表现不一样
  • 类目轴中boundaryGap可以设置为truefalse,默认为true

grid(网格)

  • 直角坐标系内绘图网格,单个 grid 内最多可以放置上下两个 X 轴,左右两个 Y 轴。可以在网格上绘制折线图,柱状图,散点图(气泡图)
位置(grid组件离容器的距离)
  • 类似于内边距吧
grid: {show: true, // 是否显示网格,就是四条边组成的大框borderColor: 'pink', // 网格边框颜色,网格四条边的颜色left: '20%', // grid 组件离容器左侧的距离top: '20%', // grid 组件离容器顶侧的距离show: true, // 显示边框,是否显示直角坐标系网格backgroundColor: 'pink', // 网格背景色,默认透明containLabel: true, // grid 区域是否包含坐标轴的刻度标签。如果包含,就不会顶格,如果不包含,则会顶格,把网格覆盖
},

color(调色盘)

  • 调色盘颜色列表。如果系列没有设置颜色,则会依次循环从该列表中取颜色作为系列颜色。 默认为
['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
  • 我们可以自定义修改,有多少条数据,我们就在数组中指定多少个颜色

series(系列)

type(类型)
  • 什么类型的图标,比如line是折线,bar是柱形等
name(系列名称)
  • 用于tooltip的显示,legend的图例筛选变化(根据这里的name值)
stack(数据堆叠)
  • 如果设置相同值,则会数据堆叠
  • 数据堆叠:
    • 第二个数据值 = 第一个数据值 + 第二个数据值
    • 第三个数据值 = 第二个数据值 + 第三个数据值… 依次叠加
  • 但是明显这种数据堆叠的效果不是我们想要的,如何解决呢?
  • 如果给stack指定不同值或者去掉这个属性则不会发生数据堆叠
series: [{name: 'Email',type: 'line',// stack: 'Total',data: [120, 132, 101, 134, 90, 230, 210]},{name: 'Union Ads',type: 'line',// stack: 'Total',data: [220, 182, 191, 234, 290, 330, 310]},{name: 'Video Ads',type: 'line',// stack: 'Total',data: [150, 232, 201, 154, 190, 330, 410]},{name: 'Direct',type: 'line',// stack: 'Total',data: [320, 332, 301, 334, 390, 330, 320]},{name: 'Search Engine',type: 'line',// stack: 'Total',data: [820, 932, 901, 934, 1290, 1330, 1320]}]

柱状图bar

基本柱状图
<template><divclass="about"ref="box"style="width: 600px; height: 300px; border: 1px solid red"></div>
</template><script>
export default {name: 'about',mounted() {// 初始化echartsvar myChart = this.$echarts.init(this.$refs.box)// 设置x轴数据const xData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']// x轴上的值(也就是对应的y上的值)const yData = [120, 200, 150, 80, 70, 110, 130]// 配置项const option = {title: {text: '主标题',},xAxis: {type: 'category',data: xData,},yAxis: {// type: 'value',},series: [{data: yData,type: 'bar',showBackground: true,backgroundStyle: {color: 'rgba(180, 180, 180, 0.2)',},},],}// 调用配置方法myChart.setOption(option)},
}
</script>
最大值、最小值markPoint:{} 图标标线markLine:{}
  • 对图表进行标注,里面有个data数组,数组里面存放对象
  • 对象中有一个type属性(特殊的标注类型,用于标注最大值最小值等)
  • 对象中还有一个name属性(标注名称)
series: [{data: yData,type: 'bar',// 显示柱状后面的背景颜色showBackground: true,// 设置柱状后面的背景颜色backgroundStyle: {color: 'skyblue',},// 图表标注markPoint: {data: [// 标记的数据数组,每一项都是一个对象// 最大值{type: 'max',name: '最大值',},// 最小值{type: 'min',name: '最小值',},// 平均值// {//   type: 'average',//   name: '平均值',// },],},// 图表标线markLine: {data: [// 平均线{type: 'average',name: '平均线',},],},},
],
水平柱状图
  • 只需要把y轴的坐标轴类型type设置为类目轴category。把x轴的坐标轴类型type设置为数值轴value
const option = {title: {text: '主标题',},xAxis: {// type: 'category',// data: xData,type: 'value',},yAxis: {// type: 'value',type: 'category',data: xData,},series: [{data: yData,type: 'bar',// 显示柱状后面的背景颜色showBackground: true,// 设置柱状后面的背景颜色backgroundStyle: {color: 'skyblue',},// 柱条的宽度,不设时自适应barWidth: 10,// 轴的颜色// color: 'red',// 单独设置每个轴的颜色itemStyle: {normal: {color: function (params) {let colorList = ['pink','#ccc','#999','#666','#333','#777','#91cc75',]return colorList[params.dataIndex]},},},      // 图表标注markPoint: {data: [// 标记的数据数组,每一项都是一个对象// 最大值{type: 'max',name: '最大值',},// 最小值{type: 'min',name: '最小值',},// 平均值// {//   type: 'average',//   name: '平均值',// },],},// 图表标线markLine: {data: [// 平均线{type: 'average',name: '平均线',},],},},],
柱子渐变色,需要通过color
  • 通过color进行设置,一共有两种方式
// 修改线性渐变色方式 1color: new echarts.graphic.LinearGradient(// (x1,y2) 点到点 (x2,y2) 之间进行渐变0,0,0,1,[{ offset: 0, color: '#00fffb' }, // 0 起始颜色{ offset: 1, color: '#0061ce' }, // 1 结束颜色]),// 修改线性渐变色方式 2color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: 'red', // 0% 处的颜色},{offset: 1,color: 'blue', // 100% 处的颜色},],globalCoord: false, // 缺省为 false},
设置grid,是否显示刻度文字containLabel
  • 只需要把containLabel设置为true即可
// 图表边界控制
grid: {// 距离 上右下左 的距离left: '3%',right: '4%',bottom: '3%',top: '3%',// 是否包含文本containLabel: true,
},
柱状图与刻度对齐方式axisTick >> alignWidthLabel
  • 下面的y轴也是同理

  • 如果为true,则刻度会与柱子对齐。如果为false,则柱子会在刻度中间

xAxis: [{// 使用类目,必须有data属性type: 'category',// 使用 data 中的数据设为刻度文字data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],// 刻度设置axisTick: {// true意思:图形在刻度中间// false意思:图形在刻度之间alignWithLabel: true,// show是否显示刻度show: false},},],
修改x轴上的文字标签的相关样式axisLabel
xAxis: [{// 使用类目,必须有data属性type: 'category',// 使用 data 中的数据设为刻度文字data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],// 刻度设置axisTick: {// true意思:图形在刻度中间// false意思:图形在刻度之间alignWithLabel: false,// 是否显示刻度show: false,},// 修改刻度文字axisLabel: {color: 'red',},},
],
修改x轴颜色设置axisLine
// 修改y轴颜色
axisLine: {lineStyle: {color: 'rgba(0,240,255,0.3)',// width: 8, // x轴线的粗细// opcity: 0, // 如果不想显示x轴线,则设为0},
},
修改y轴分割线颜色样式
// Y轴分割线颜色
splitLine: {lineStyle: {color: 'rgba(0,240,255,0.3)',},
},

饼图pie

基本饼图
<template><divclass="demo01"ref="box"style="width: 600px; height: 300px; border: 1px solid red"></div>
</template><script>
export default {name: 'Demo01',mounted() {// 初始化var myChart = this.$echarts.init(this.$refs.box)// 饼图数据源const data = [{ value: 1048, name: '<1000' },{ value: 735, name: '1000~3000' },{ value: 580, name: '3000~5000' },{ value: 484, name: '5000~10000' },{ value: 300, name: '10000+' },]// 配置项const option = {title: {text: '基本饼状图',left: 'center', // 位置,标题居中},legend: {// 图例的布局朝向orient: 'vertical', // 垂直方式,默认水平left: 'right', // 位置},series: [{name: '收入图',type: 'pie',// 饼图半径radius: ['30%', '50%'],data: data,// 高亮状态的扇区和标签样式emphasis: {// 每一项的样式itemStyle: {shadowBlur: 10, // 图形阴影的模糊大小shadowOffsetX: 0, // 阴影水平方向上的偏移距离shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色},},// 饼图图形上的文本标签label: {// 是否显示文字,默认是trueshow: true,// 文本的位置 取值有inside(内部),outside(外部,默认),center(中心)position: 'inside',// 文本标签控制饼形图的相关样式fontSize: 10,},},],}// 调用配置方法myChart.setOption(option)},
}
</script>
圆环图radius:number/string/Array
  • series的饼图中有radius属性,也就是饼图的半径,值可以是numberstringArray类型的

  • 取值可以是百分比,具体的px。如果是数组,则第一项是内半径,第二项是外半径

radius: ['30%', '50%']   // 就改了这一行,其他的都同上
饼图图形上的文本标签label:{}
  • 可用于说明图形的一些数据信息,比如值,名称等
![引导线](C:\Users\huihui\Desktop\echars\最新\截图\引导线.png)label: {// 是否显示文字,默认是trueshow: true,// 文本的位置 取值有inside(内部),outside(外部,默认),center(中心)// position: 'inside',// 自定义饼图上显示的文本formatter: (params) => {//   console.log(params.data) // 设置的饼图数据源//   console.log(params.percent) // 数据的百分比占多少// 想要什么样的,就返回什么样的return (params.data.name +'的有' +params.data.value +'占比%' +params.percent)},},
labelLine(线的样式)
  • 标签的视觉引导线样式,再label位置设置为outside的时候会显示视觉引导线

属性:

  • show,是否显示
  • length,视觉引导项第一段的长度
  • length2,视觉引导项第二段的长度
// 控制引导线的样式labelLine: {show: true,length: 6,length2: 8,},
设置为南丁格尔图roseType:boolean/string
  • 是否展示成南丁格尔图,通过半径区分数据大小。可选择两种模式:
    1. 'radius' 扇区圆心角展现数据的百分比,半径展现数据的大小
    2. 'area' 所有扇区圆心角相同,仅通过半径展现数据大小
// 设置是否展示成南丁格尔图
roseType: 'area',
图形样式,设置每一项的样式itemStyle:{}
  • 设置每一项的设置基本都是itemStyle: {}
  • color取值有字符串和函数,如果想修改每一项,就用函数形式,dataIndex是每一项的索引
itemStyle: {// 全部一个颜色// color: 'skyblue',// 每一项都不同颜色color: (params) => {let colorList = ['pink','#ccc','#999','#666','#333',]return colorList[params.dataIndex]},borderColor: '#ccc',borderType: 'dashed',
},

改变每一项的颜色,还可以通过修改数据源实现

// 饼图数据源
const data = [{value: 1048,name: '<1000',itemStyle: {normal: {color: 'pink',},},},{value: 735,name: '1000~3000',itemStyle: {normal: {color: 'skyblue',},},},{value: 580,name: '3000~5000',itemStyle: {normal: {color: '#ccc',},},},{value: 484,name: '5000~10000',itemStyle: {normal: {color: '#333',},},},{value: 300,name: '10000+',itemStyle: {normal: {color: '#999',},},},
]

折线图line

基本折线图
<template><divclass="demo02"ref="box"style="width: 660px; height: 300px; border: 1px solid red"></div>
</template><script>
export default {name: 'Demo02',mounted() {// 初始化var myChart = this.$echarts.init(this.$refs.box)// 线型图x轴数据源const xData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']// 线型图y轴数据源const yData = [150, 230, 224, 218, 135, 147, 260]// 配置项const option = {xAxis: {type: 'category', // 类目轴data: xData,},yAxis: {type: 'value', // 数值轴},series: [{data: yData,type: 'line',},],}// 调用配置方法myChart.setOption(option)},
}
</script>
smooth: boolean/number 折线图变平滑
  • 是否平滑曲线显示
series: [{data: yData,type: 'line',smooth: true,},
],
区域填充样式areaStyle:{}
  • 设置后显示成区域面积图
series: [{data: yData,type: 'line',smooth: true,areaStyle: {color: 'skyblue',},},
],
显示最大最小以及平均值markPoint:{} 和 markLine:{}
  • markPoint:{ } 图表标注,其他的图形也是同理
  • markLine:{ } 图表标线,其他的图形也是同理
series: [{data: yData,type: 'line',smooth: true,areaStyle: {color: 'skyblue',},markPoint: {data: [{ type: 'max', name: 'Max' },{ type: 'min', name: 'Min' },],},markLine: {data: [{ type: 'average', name: 'Avg' }],},},
],
折线图堆叠效果stack:‘’
  • series系列数组中声明多个对象,里面的每一项对象就是一个折线,如果想让他们都在一组,则它们的stack必须相同
  • 数据堆叠,同个类目轴上系列配置相同的 stack 值可以堆叠放置
  • 目前 stack 只支持堆叠于 'value''log' 类型的类目轴上(y轴),不支持 'time''category' 类型的类目轴
series: [{name: 'Email',type: 'line',stack: 'Total',data: [120, 132, 101, 134, 90, 230, 210],},{name: 'Union Ads',type: 'line',stack: 'Total',data: [220, 182, 191, 234, 290, 330, 310],},{name: 'Video Ads',type: 'line',stack: 'Total',data: [150, 232, 201, 154, 190, 330, 410],},{name: 'Direct',type: 'line',stack: 'Total',data: [320, 332, 301, 334, 390, 330, 320],},
],
经过某一区域,区域高亮emphasis:{}
  • 折线图的高亮状态
series: [{name: 'Email',type: 'line',stack: 'Total',areaStyle: {},emphasis: {focus: 'series',},data: [120, 132, 101, 134, 90, 230, 210],},{name: 'Union Ads',type: 'line',stack: 'Total',areaStyle: {},emphasis: {focus: 'series',},data: [220, 182, 191, 234, 290, 330, 310],},{name: 'Video Ads',type: 'line',stack: 'Total',areaStyle: {},emphasis: {focus: 'series',},data: [150, 232, 201, 154, 190, 330, 410],},
],

散点图scatter

基本散点图
<template><divclass="demo02"ref="box"style="width: 660px; height: 300px; border: 1px solid red"></div>
</template><script>
export default {name: 'Demo03',mounted() {// 初始化var myChart = this.$echarts.init(this.$refs.box)// 配置项const option = {xAxis: {},yAxis: {},series: [{// symbolSize: number / Array / Function 标记的大小symbolSize: 20,data: [[10.0, 8.04],[8.07, 6.95],[13.0, 7.58],[9.05, 8.81],[11.0, 8.33],[14.0, 7.66],[13.4, 6.81],[10.0, 6.33],[14.0, 8.96],[12.5, 6.82],[9.15, 7.2],[11.5, 7.2],[3.03, 4.23],[12.2, 7.83],[2.02, 4.47],[1.05, 3.33],[4.05, 4.96],[6.03, 7.24],[12.0, 6.26],[12.0, 8.84],[7.08, 5.82],[5.02, 5.68],],type: 'scatter',},],}// 调用配置方法myChart.setOption(option)},
}
</script>
修改标记颜色color和渐变
  • 调色盘颜色列表。如果系列没有设置颜色,则会依次循环从该列表中取颜色作为系列颜色。 默认为:
['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
  • 推荐使用color
series: [{// symbolSize: number / Array / Function 标记的大小symbolSize: 20,// 标记颜色(这种是写死的)// color: 'skyblue',// colorBy 取值有series(同一个颜色) data(不同颜色,会取color的默认颜色)// colorBy: 'data',// 推荐直接使用colorcolor: {// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1// 相当于在图形包围盒中的百分比,如果 globalCoord 为 true,则该四个值是绝对的像素位置type: 'linear',x: 0,y: 0,x2: 0, // x方向 从左到右,设置的都为0,没往右走,所以不变y2: 1, // y方向 从上到下,设置的是0到1,从上直接到最下了,所以整个渐变colorStops: [{offset: 0,color: 'red', // 0% 处的颜色},{offset: 1,color: 'blue', // 100% 处的颜色},],global: false, // 缺省为 false},data: [[10.0, 8.04], // [x轴坐标, y轴坐标][8.07, 6.95],[13.0, 7.58],[9.05, 8.81],[11.0, 8.33],[14.0, 7.66],[13.4, 6.81],],type: 'scatter',},
],
经过标记,标记高亮emphasis:{}
  • emphasis里的styleItem属性中进行设置,如果想要提示框,则可以添加tooltip
tooltip: {},
series: [{// symbolSize: number / Array / Function 标记的大小symbolSize: 20,// 标记颜色(这种是写死的)// color: 'skyblue',// colorBy 取值有series(同一个颜色) data(不同颜色,会取color的默认颜色)//   colorBy: 'data',// 推荐直接使用colorcolor: {// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1// 相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置type: 'linear',x: 0,y: 0,x2: 0, // x方向 从左到右,设置的都为0,没往右走,所以不变y2: 1, // y方向 从上到下,设置的是0到1,从上直接到最下了,所以整个渐变colorStops: [{offset: 0,color: 'pink', // 0% 处的颜色},{offset: 1,color: 'skyblue', // 100% 处的颜色},],global: false, // 缺省为 false},// 高亮效果emphasis: {itemStyle: {borderColor: 'pink',borderWidth: 6,},},data: [[10.0, 8.04], // x轴坐标,y轴坐标[8.07, 6.95],[13.0, 7.58],[9.05, 8.81],[11.0, 8.33],[5.02, 5.68],],type: 'scatter',},
],

k线图candlestick

  • 上涨下跌都可以很直观的看出来,像股票这种就适合K线图
基本的K线图
<template><divclass="demo02"ref="box"style="width: 660px; height: 300px; border: 1px solid red"></div>
</template><script>
export default {name: 'Demo03',mounted() {// 初始化var myChart = this.$echarts.init(this.$refs.box)// 配置项const option = {xAxis: {data: ['2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27'],},yAxis: {},tooltip: {// 指示器axisPointer: {type: 'cross',},},series: [{type: 'candlestick',data: [[20, 34, 10, 38], // [块的下, 块的上, 线的下, 线的上][40, 35, 30, 50],[31, 38, 33, 44],[38, 15, 5, 42],],itemStyle: {color: 'red', // 上涨颜色color0: 'green', // 下跌颜色},},],}// 调用配置方法myChart.setOption(option)},
}
</script>
图表标注markPoint:{}
  • markPoint中有一个data属性。标注的数据数组。每个数组项是一个对象
  • data中有一个valueDim属性,在使用type时有效,用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称,例如折线图时可以是xangle等、candlestick 图时可以是openclose等维度名称
  • type指定最大值,最小值,平均值
<template><divclass="demo02"ref="box"style="width: 660px; height: 300px; border: 1px solid red"></div>
</template><script>
export default {name: 'Demo03',data() {return {// k线图数据kData: [[20, 34, 10, 38], // [块的下, 块的上, 线的下, 线的上][40, 35, 30, 50],[31, 38, 33, 44],[38, 15, 5, 42],],}},computed: {// 折线图数据  lineData() {let newData = this.kData.map((item) => item[0])return newData},},mounted() {// 初始化var myChart = this.$echarts.init(this.$refs.box)// 配置项const option = {xAxis: {data: ['2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27'],},yAxis: {},tooltip: {// 指示器axisPointer: {type: 'cross',},},series: [{type: 'candlestick',data: this.kData,itemStyle: {color: 'red', // 上涨颜色color0: 'green', // 下跌颜色},markPoint: {data: [{name: '最大值',type: 'max',valueDim: 'highest',},{name: '最小值',type: 'min',valueDim: 'lowest',},{name: '平均值',type: 'average',valueDim: 'close',},],},},{type: 'line',smooth: true,data: this.lineData,},],}// 调用配置方法myChart.setOption(option)},
}
</script>

雷达图radar

  • radar属性只适用于雷达图,雷达图坐标系组件,雷达图使用radar 组件作为其坐标系
    • 里面的indicator,表示雷达图的指示器,用来指定雷达图中的多个变量(维度)
    • 里面的shape,雷达图绘制类型,支持 'polygon'(默认,雷达图多边形显示) 和 'circle'(雷达图圆形显示)
基本雷达图
<template><divclass="demo02"ref="box"style="width: 660px; height: 400px; border: 1px solid red"></div>
</template><script>
export default {name: 'Demo03',mounted() {// 初始化var myChart = this.$echarts.init(this.$refs.box)// 配置项const option = {title: {text: '基础雷达图',},legend: {data: ['预算支出', '实际支出'],},radar: {// 雷达图绘制类型,支持 'polygon'(正常显示) 和 'circle'(圆形显示)shape: 'circle',// 雷达图的指示器,用来指定雷达图中的多个变量(维度)indicator: [{ name: '购物', max: 1000 },{ name: '吃饭', max: 1000 },{ name: '旅游', max: 1000 },{ name: '出行', max: 1000 },{ name: '住宿', max: 1000 },],},series: [{name: '基本雷达图',type: 'radar',data: [{value: [500, 800, 300, 600, 600],name: '预算支出',},{value: [300, 700, 200, 500, 500],name: '实际支出',},],},],}// 调用配置方法myChart.setOption(option)},
}
</script>
设置半径radius:number/string/Array
  • 设置雷达图半径
radar: {// 雷达图绘制类型,支持 'polygon'(正常显示) 和 'circle'(圆形显示)shape: 'circle',// 雷达图的指示器,用来指定雷达图中的多个变量(维度)indicator: [{ name: '购物', max: 1000 },{ name: '吃饭', max: 1000 },{ name: '旅游', max: 1000 },{ name: '出行', max: 1000 },{ name: '住宿', max: 1000 },],// 半径radius: '70%',
},
坐标轴起始位置startAngle:number
  • 坐标系起始角度,也就是第一个指示器轴的角度(设置这个属性会进行旋转)
radar: {// 雷达图绘制类型,支持 'polygon'(正常显示) 和 'circle'(圆形显示)shape: 'circle',// 雷达图的指示器,用来指定雷达图中的多个变量(维度)indicator: [{ name: '购物', max: 1000 },{ name: '吃饭', max: 1000 },{ name: '旅游', max: 1000 },{ name: '出行', max: 1000 },{ name: '住宿', max: 1000 },],// 半径radius: '70%',// 图形旋转startAngle: 180,
},
指示器轴的分割段数splitNumber:number
radar: {// 雷达图绘制类型,支持 'polygon'(正常显示) 和 'circle'(圆形显示)shape: 'circle',// 雷达图的指示器,用来指定雷达图中的多个变量(维度)indicator: [{ name: '购物', max: 1000 },{ name: '吃饭', max: 1000 },{ name: '旅游', max: 1000 },{ name: '出行', max: 1000 },{ name: '住宿', max: 1000 },],// 半径radius: '70%',// 图形旋转startAngle: 180,// 指示器轴的分割段数splitNumber: 3,
},
雷达图每个指示器名称的配置项axisName:{}
radar: {// 雷达图绘制类型,支持 'polygon'(正常显示) 和 'circle'(圆形显示)shape: 'circle',// 雷达图的指示器,用来指定雷达图中的多个变量(维度)indicator: [{ name: '购物', max: 1000 },{ name: '吃饭', max: 1000 },{ name: '旅游', max: 1000 },{ name: '出行', max: 1000 },{ name: '住宿', max: 1000 },],// 半径radius: '70%',// 图形旋转startAngle: 180,// 指示器轴的分割段数splitNumber: 3,// 雷达图每个指示器名称的配置项axisName: {color: 'pink',formatter: '值是: {value}',},
},
坐标轴在 grid区域中的分隔区域splitArea:{}
  • 默认不显示,可通过show来进行显示
  • areaStyle可以设置分隔区域的样式
radar: {// 雷达图绘制类型,支持 'polygon'(正常显示) 和 'circle'(圆形显示)shape: 'circle',// 雷达图的指示器,用来指定雷达图中的多个变量(维度)indicator: [{ name: '购物', max: 1000 },{ name: '吃饭', max: 1000 },{ name: '旅游', max: 1000 },{ name: '出行', max: 1000 },{ name: '住宿', max: 1000 },],// 半径radius: '60%',// 图形旋转startAngle: 180,// 指示器轴的分割段数splitNumber: 3,// 雷达图每个指示器名称的配置项axisName: {color: 'pink',formatter: '值是: {value}',},// 坐标轴在 grid区域中的分隔区域splitArea: {show: true,areaStyle: {color: ['pink', 'skyblue', 'gray'],shadowColor: '0,0,0,.2',shadowBlur: 10,},},
},
对线段内容设置,需要在series里设置
  • lineStyle进行设置线段样式
series: [{name: '基本雷达图',type: 'radar',data: [{value: [500, 800, 300, 600, 600],name: '预算支出',// 线条填充areaStyle: {color: '#F56C6C',},},{value: [300, 700, 200, 500, 500],name: '实际支出',},],lineStyle: {color: '#fff',type: 'dotted', // 点线},},
],

漏斗图funnel

基本漏斗图
<template><divclass="demo05"ref="box"style="width: 660px; height: 400px; border: 1px solid red"></div>
</template><script>
export default {name: 'Demo03',mounted() {// 初始化var myChart = this.$echarts.init(this.$refs.box)// 配置项const option = {title: {text: '基本漏斗图',},tooltip: {trigger: 'item',formatter: '{a} <br/>{b} : {c}%',},series: [{name: '等级',type: 'funnel',// 漏斗图位置left: '10%',top: 60,bottom: 60,width: '80%', // 宽度min: 0, // 最小值max: 100, // 最大值minSize: '0%', //最小百分比maxSize: '100%', // 最大百分比sort: 'descending', // 排序,从小到大还是从大到小data: [{ value: 60, name: '神器' },{ value: 40, name: '紫装' },{ value: 20, name: '白装' },{ value: 80, name: '传说' },{ value: 100, name: '史诗' },],},],}// 调用配置方法myChart.setOption(option)},
}
</script>
排序sort:‘’/fun
  • 数据排序, 可以取 'ascending'(从小到大),'descending'(从大到小),'none'(表示按 data 顺序),或者一个函数(即 Array.prototype.sort(function (a, b) { ... }))。
series: [{name: '等级',type: 'funnel',// 漏斗图位置left: '10%',top: 60,bottom: 60,width: '80%', // 宽度min: 0, // 最小值max: 100, // 最大值minSize: '0%', //最小百分比maxSize: '100%', // 最大百分比sort: 'descending', // 排序,从小到大还是从大到小data: [{ value: 60, name: '神器' },{ value: 40, name: '紫装' },{ value: 20, name: '白装' },{ value: 80, name: '传说' },{ value: 100, name: '史诗' },],},
],
单个漏斗样式itemStyle
series: [{name: '等级',type: 'funnel',// 漏斗图位置left: '10%',top: 60,bottom: 60,width: '80%', // 宽度min: 0, // 最小值max: 100, // 最大值minSize: '0%', //最小百分比maxSize: '100%', // 最大百分比sort: 'descending', // 排序,从小到大还是从大到小data: [{ value: 60, name: '神器' },{ value: 40, name: '紫装' },{ value: 20, name: '白装' },{ value: 80, name: '传说' },{ value: 100, name: '史诗' },],itemStyle: {borderWidth: 3,borderColor: '#ccc',},},
],
label漏斗图图形上的文本标签
  • 可用于说明图形的一些数据信息,比如值,名称等
series: [{name: '等级',type: 'funnel',// 漏斗图位置left: '10%',top: 60,bottom: 60,width: '80%', // 宽度min: 0, // 最小值max: 100, // 最大值minSize: '0%', //最小百分比maxSize: '100%', // 最大百分比sort: 'descending', // 排序,从小到大还是从大到小data: [{ value: 60, name: '神器' },{ value: 40, name: '紫装' },{ value: 20, name: '白装' },{ value: 80, name: '传说' },{ value: 100, name: '史诗' },],itemStyle: {borderWidth: 3,borderColor: '#ccc',},label: {show: true,position: 'inside',},},
],
高亮效果emphasis:{}
  • 高亮的标签和图形样式
series: [{name: '等级',type: 'funnel',// 漏斗图位置left: '10%',top: 60,bottom: 60,width: '80%', // 宽度min: 0, // 最小值max: 100, // 最大值minSize: '0%', //最小百分比maxSize: '100%', // 最大百分比sort: 'descending', // 排序,从小到大还是从大到小data: [{ value: 60, name: '神器' },{ value: 40, name: '紫装' },{ value: 20, name: '白装' },{ value: 80, name: '传说' },{ value: 100, name: '史诗' },],itemStyle: {borderWidth: 3,borderColor: '#ccc',},label: {show: true,position: 'inside',},emphasis: {label: {fontSize: 20,},},},
],

仪表盘gauge

基本仪表盘
<template><divclass="demo05"ref="box"style="width: 660px; height: 400px; border: 1px solid red"></div>
</template><script>
export default {name: 'Demo03',mounted() {// 初始化var myChart = this.$echarts.init(this.$refs.box)// 配置项const option = {tooltip: {formatter: '{a} <br/>{b} : {c}%',},series: [{name: '基本仪表盘',type: 'gauge',detail: {formatter: '{value}',},data: [{value: 50,name: '提示信息',},],},],}// 调用配置方法myChart.setOption(option)},
}
</script>
仪表盘详情,用于显示数据detail:{}
series: [{name: '基本仪表盘',type: 'gauge',detail: {formatter: '{value}',// 是否开启标签的数字动画valueAnimation: true,},data: [{value: 50,name: '提示信息',},],},
],
展示当前进度progress:{}
series: [{name: '基本仪表盘',type: 'gauge',detail: {formatter: '{value}',// 是否开启标签的数字动画valueAnimation: true,},progress: {show: true, // 是否显示进度条},data: [{value: 50,name: '提示信息',},],},
],

关系图graph

基本关系图
  • layout图的布局,取值有
    1. 'none' 不采用任何布局,使用节点中提供的 x, y 作为节点的位置
    2. 'circular' 采用环形布局,见示例 Les Miserables,布局相关的配置项见 graph.circular
    3. 'force' 采用力引导布局,见示例 Force,布局相关的配置项见 graph.force
<template><divref="box"style="width: 660px; height: 400px; border: 1px solid red"></div>
</template><script>
export default {name: 'Demo08',data() {return {list: [{name: '张三',id: 0,},{name: '李四',id: 1,},{name: '王五',id: 2,},{name: '赵六',id: 3,},],}},mounted() {// 初始化var myChart = this.$echarts.init(this.$refs.box)// 配置项const option = {series: [{type: 'graph',data: this.list,layout: 'force', // 图的布局},],}// 调用配置方法myChart.setOption(option)},
}
</script>
设置点的大小(在关系数组数据中设置)
  • symbolSize,直接设置大小
list: [{name: '张三',id: 0,symbolSize: 10, // 点的大小},{name: '李四',id: 1,symbolSize: 13,},{name: '王五',id: 2,symbolSize: 16,},{name: '赵六',id: 3,symbolSize: 13,},
],
设置点的相关(在series中设置)
series: [{type: 'graph',data: this.list,layout: 'force', // 图的布局itemStyle: { // 每一项的样式color: 'pink',},},
],
图形上的文本标签修改label:{}
  • 可用于说明图形的一些数据信息,比如值,名称等
series: [{type: 'graph',data: this.list,layout: 'force', // 图的布局itemStyle: {color: 'pink',},label: {// 图形上的文字show: true,position: 'bottom',distance: 6, // 距离图形的距离fontSize: 16,align: 'center',},},
],
设置点与点之间的间距force:{}
series: [{type: 'graph',data: this.list,layout: 'force', // 图的布局// 设置每一项的样式itemStyle: {color: 'skyblue',},// 设置字体的样式label: {// 图形上的文字show: true,position: 'bottom',distance: 6, // 距离图形的距离fontSize: 16,align: 'center',},// 设置间距focus: {repulsion: 100, // 点与点之间的gravity: 0.01, // 距离中心点的位置,值越大节点越往中心点靠拢edgeLength: 200, // 边的两个节点之间的距离},// 节点间的关系数据links: {},},
]
关系数据(数据(点)之间怎么链接),links:[]
  • 需要额外设置一个数组数据存放
data() {return {num: [{source: '1', // 边的节点名称target: '2', // 目标节点名称relation: {name: '朋友',id: 1,},},{source: '1', // 边的节点名称target: '3', // 目标节点名称relation: {name: '朋友',id: 1,},},{source: '1', // 边的节点名称target: '4', // 目标节点名称relation: {name: '朋友',id: 1,},},],}
}// 节点间的关系数据(怎么连接))
links: this.num,
// 调用配置方法
myChart.setOption(option)

},
}


##### 设置点的大小(在关系数组数据中设置)- `symbolSize`,直接设置大小```js
list: [{name: '张三',id: 0,symbolSize: 10, // 点的大小},{name: '李四',id: 1,symbolSize: 13,},{name: '王五',id: 2,symbolSize: 16,},{name: '赵六',id: 3,symbolSize: 13,},
],
设置点的相关(在series中设置)
series: [{type: 'graph',data: this.list,layout: 'force', // 图的布局itemStyle: { // 每一项的样式color: 'pink',},},
],
图形上的文本标签修改label:{}
  • 可用于说明图形的一些数据信息,比如值,名称等
series: [{type: 'graph',data: this.list,layout: 'force', // 图的布局itemStyle: {color: 'pink',},label: {// 图形上的文字show: true,position: 'bottom',distance: 6, // 距离图形的距离fontSize: 16,align: 'center',},},
],
设置点与点之间的间距force:{}
series: [{type: 'graph',data: this.list,layout: 'force', // 图的布局// 设置每一项的样式itemStyle: {color: 'skyblue',},// 设置字体的样式label: {// 图形上的文字show: true,position: 'bottom',distance: 6, // 距离图形的距离fontSize: 16,align: 'center',},// 设置间距focus: {repulsion: 100, // 点与点之间的gravity: 0.01, // 距离中心点的位置,值越大节点越往中心点靠拢edgeLength: 200, // 边的两个节点之间的距离},// 节点间的关系数据links: {},},
]
关系数据(数据(点)之间怎么链接),links:[]
  • 需要额外设置一个数组数据存放
data() {return {num: [{source: '1', // 边的节点名称target: '2', // 目标节点名称relation: {name: '朋友',id: 1,},},{source: '1', // 边的节点名称target: '3', // 目标节点名称relation: {name: '朋友',id: 1,},},{source: '1', // 边的节点名称target: '4', // 目标节点名称relation: {name: '朋友',id: 1,},},],}
}// 节点间的关系数据(怎么连接))
links: this.num,

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_274589.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

新项目启动!携手哈尔滨大电机研究所赋能电力设备 AR 运维

3 月 6 日&#xff0c;由哈尔滨大电机研究所&#xff08;下以“哈大所”简称&#xff09;、上海联宏以及 ALVA Systems 共同筹备的哈电机发电设备 AR 智能运维项目&#xff08;下以“启动项目”简称&#xff09;启动仪式在哈尔滨哈电机总部举办。ALVA Systems 作为项目实施单位…

mendeley管理文献样式

编辑GB/T 7714—2005参考文件样式&#xff0c;解决&#xff1a;显示大小写&#xff0c;显示et al&#xff0c;不显示url&#xff0c;doi&#xff0c;参考文献信息不全的问题。 前前后后忙了一周&#xff0c;现在记录下用到的方法。 祝大家论文顺利&#xff01; 调整文件样式 …

实在智能受邀出席首届生成智能产业峰会,成为首个生成式AI标准编写单位

3月20日&#xff0c;由人工智能关键技术和应用评测工业和信息化部重点实验室、中国信息通信研究院云计算与大数据研究所主办的“万物智生 百业赋能”首届生成智能产业峰会在北京成功召开。此次峰会以“技术前沿、行业赋能、应用示范、标准引领”为主线&#xff0c;邀请了人工智…

力扣(LeetCode)1626. 无矛盾的最佳球队(C++)

排序 动态规划 两个性质: ①得分最高 ② 年龄大的&#xff0c;分数要高。 这提示我们按照分数&#xff0c;或者年龄&#xff0c;对列表排序。先固定一个性质&#xff0c;才考虑另外的性质。 按照分数和年龄排序都可以。这里按照年龄&#xff0c;从大到小排序。年龄大的&…

串口通信(STM32演示实现)

目录 一、串行通信的概念 二、寄存器 2.1控制寄存器USART_CR1 2.2控制寄存器USART_CR2​编辑 2.3串口寄存器USART_BRR 2.4 USART_ISR 2.5USART_TDR 2.6USART_RDR​编辑 三、实现串口数据的收发 一、串行通信的概念 u通信&#xff0c;最少要有两个对象&#xff0c;一个收…

提高曝光率:外贸网站如何充分利用谷歌优化赢得客户

自从我从事外贸行业以来&#xff0c;谷歌优化一直是我关注的重点。 作为一个外贸从业者&#xff0c;我深知提高网站在谷歌搜索引擎中的排名对企业的重要性。 那么&#xff0c;如何利用谷歌优化来提高外贸网站的曝光率&#xff0c;从而赢得更多客户呢&#xff1f; 以下是我在…

I2C和SPI总线以及通信

通讯属性 概括 Serial/parallel 串行/并行Synchronous/asynchronous 同步/异步Point-to-point / bus 点对点 总线Half-duplex/full-duplex 半双工/全双工Master-slave/ equal partners 主从/对等single-ending / differential 单端/差分 点对点和总线 点对点通讯 只有两个通…

【UE】使用初学者内容包创建简单的地形材质

效果步骤新建一个材质打开该材质&#xff0c;创建一个“layerblend”节点创建3个数组元素设置图层命名、混合类型和预览权重使用初学者内容包中的“T_Rock_Basalt_D”纹理、“T_Ground_Gravel_D”纹理和“T_Ground_Grass_D”纹理使用“Terrain_Mat”材质创建一个地形可以用雕刻…

PMP项目管理证书的含金量高吗?

PMP 项目管理证书的含金量一直是大家非常关心的一个问题&#xff0c;其实没必要纠结含金量&#xff0c;想从事项目管理岗位的&#xff0c;考就对了。 先给大家上个目录&#xff0c;再来细细说明 一、PMP带来的好处&#xff08;含金量&#xff09;二、PMP适合什么人考三、PMP 考…

CCS v6 导入工程调试仿真烧写程序教程

点击CCS图标&#xff0c;选择要放置的workplace 1.然后配置仿真器参数&#xff1a;View>Target Configurations 然后开始配置仿真器参数&#xff0c;大家可以根据自己的器件&#xff1a; 选择好之后&#xff0c;点击save 2.导入新的工程 然后就可以看到工程已经导入成功了&a…

掌握CentOS7环境下的Docker使用(八)阿里云镜像仓库实战、harbor仓库搭建与实战、本地镜像容器的载入载出

文章目录镜像仓库简介公共镜像仓库私有镜像仓库阿里云镜像仓库的搭建与使用创建仓库登录将镜像推送到Registry从Registry中拉取镜像harbor仓库搭建与使用搭建harbor仓库配置与使用harbor仓库本地镜像容器的载入与载出保存镜像保存容器可能出现的问题输入正确的密码登录不进去阿…

人员玩手机离岗识别检测系统 yolov5

人员玩手机离岗识别检测系统根通过pythonyolov5网络模型识别算法技术&#xff0c;人员玩手机离岗识别检测算法可以对画面中人员睡岗离岗、玩手机打电话、脱岗睡岗情况进行全天候不间断进行识别检测报警提醒。Python是一种由Guido van Rossum开发的通用编程语言&#xff0c;它很…

Spring核心概念

Spring核心概念1 介绍1.1 为什么要学?1.2 学什么?1.3 怎么学?2 Spring相关概念2.1 初识Spring2.1.1 Spring家族2.1.2 了解Spring发展史2.2 Spring系统架构2.2.1 系统架构图2.2.2 课程学习路线2.3 Spring核心概念2.3.1 目前项目中的问题2.3.2 IOC、IOC容器、Bean、DI2.3.3 核…

Open Inventor 2023.1RC 将更大变化

体积可视化 具有单一分辨率的体积渲染 使用单一分辨率渲染卷更容易&#xff0c;因为卷可视化现在可以根据当前设置和硬件配置自动计算出最佳分辨率。使用单一分辨率可防止在默认模式下可能可见的不良伪影。 下图突出显示了单一分辨率的优势。在左图中&#xff0c;在 2 种分辨…

深度学习:GPT1、GPT2

深度学习&#xff1a;GPT1、GPT2、GPT3的原理与模型代码解读GPT-1IntroductionFramework自监督学习微调ExperimentGPT-2IntroductionApproachConclusionGPT-3GPT-1 Introduction GPT-1&#xff08;Generative Pre-training Transformer-1&#xff09;是由OpenAI于2018年发布的…

Python读取,预处理DICOM文件方式

需要的库 ●Simpleitk 安装命令&#xff1a; conda install -c simpleitk simpleitk使用&#xff1a; import SimpleITK as sitk●pydicom&#xff08;不推荐&#xff0c;可能有些文件打不开&#xff09; 安装命令&#xff1a; conda install -c conda-forge pydicom●PIL …

linux系统添加审计用户并进行权限控制

审计账号只用于审计功能&#xff0c;其权限可在普通账号基础上进行修改.创建审计用户 sjyhuseradd sjyh为审计用户设置登录密码passwd sjyh会有如下提示&#xff0c;按照提示依次修改即可:更改用户 sjyh 的密码 。 新的 密码&#xff1a; 重新输入新的 密码&#xff1a; 重新输…

平庸的恐惧,就业的烦恼——致互联网人进退两难的35岁

最近阿道看到了一些黑色幽默的新闻。 事情是这样的&#xff0c;某媒体发文抨击职场的“35岁”歧视&#xff0c;但后来被扒出&#xff0c;该媒体所属的机构在发布招聘信息时&#xff0c;却明确地标注了受聘者的年龄界限。 这一通操作属实把大家看傻了&#xff0c;后来阿道又在…

AVL树大讲堂

1.基础概念介绍 首先在前面我们介绍了二叉搜索树&#xff0c;但是如果当存储的数据接近有序或者恰巧有序的时候&#xff0c;二叉搜索树将逐渐退化为单支树&#xff0c;导致搜索效率降低&#xff0c;因此我们的avl树便为了解决这一问题而诞生了。 基础性质&#xff1a;当向二叉…

Tone Mapping中luma滤波(降噪)对噪声放大的定性分析

Tone Mapping中luma滤波对噪声放大的定性分析 在tone mapping过程中&#xff0c;通常经过统计之后得到一条mapping曲线&#xff0c;记这条曲线为f(x)f(x)f(x)&#xff0c;mapping过程中&#xff0c;对于给定的点&#xff0c;假定其亮度为xxx&#xff0c;映射后为f(x)f(x)f(x)&…