带【科技感】的Echarts 图表

news2024/11/16 21:54:07

请添加图片描述
Echarts脚本在线地址 https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js

引入Echarts 脚本后粘贴代码

vue2 代码：

<template>
  <div>
    <div ref="col-2-row-2" class="col-2-row-2"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      config: {
        list: [
          {name: "垃圾治理", id: "scene_type_2", value: 11},
          {name: "生活垃圾", id: "random_clap_type_3", value: 5},
          {name: "水域治理", id: "scene_type_5", value: 1},
          {name: "生活污水", id: "random_clap_type_2", value: 4},
          {name: "文明乡风", id: "random_clap_type_6", value: 10},
          {name: "农业废弃物", id: "random_clap_type_4", value: 2},
          {name: "农村厕所", id: "random_clap_type_1", value: 6},
          {name: "其他问题", id: "random_clap_type_7", value: 0},
          {name: "基础设施", id: "scene_type_3", value: 6},
          {name: "村容村貌", id: "scene_type_1", value: 19},
          {name: "蓝天守卫", id: "scene_type_4", value: 2},
        ]
      }
    }
  },
  methods: {
    initEcharts(dom, config, fn) {
      let _self = this, angle = 0, myChart
      if (this.$echarts.init) {
        myChart = this.$echarts.init(dom, null);
      } else {
        myChart = this.$echarts(dom, null);
      }
      setInterval(() => {
        angle = angle + 3
        let option = fn(_self, config, angle)
        myChart.setOption(option, true);
        // eslint-disable-next-line no-undef
        // tools.loopShowTooltip(myChart, option, {loopSeries: true});
      }, 120);
    },
    col2row2(vm, config = {}, angle = 0){
      let data = [];//角度，用来做简单的动画效果的
      let { list = [] } = config
      let _self = this;
      let img = 'data:image/png;base64,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'
      let color=['#FF801C', '#F5FF46', '#00FE65', '#00FEFF', '#ffa800', '#ff5b00', '#ff3000']
      let seriesOption = [
          {
              name: '',
              type: 'pie',
              clockWise: false,
              radius: ['33%', '38%'],
              y: '-25%',
              hoverAnimation: false,
              label: {
                  show: true,
                  position: 'outside',
                  color: '#ddd',
                  normal: {
                    show: true,
                    textStyle: {
                      fontSize: 12,
                      color: '#bbd0e8'
                    }
                  },
                  
              },
              itemStyle: {
                  normal: {
                      labelLine: {
                          length: 20,
                          length2: 40,
                          show: true,
                          color: '#00ffff',
                      },
                        // 数据 百分比
                      label: {
                        formatter: function (params) {
                            let percent = 0;
                            let total = 0;
                            for (let i = 0; i < list.length; i++) {
                                total += list[i].value;
                            }
                            percent = ((params.value / total) * 100).toFixed(0);
                            if (params.name !== '') {
                                return params.name + '：' + percent + '%';
                            } else {
                                return '';
                            }
                        },
                      }
                  },
              },
              data: data,
          },
          // 外线
          {
              name: 'ring5',
              type: 'custom',
              coordinateSystem: 'none',
              renderItem: function (params, api) {
                  return {
                      type: 'arc',
                      shape: {
                          cx: api.getWidth() / 2,
                          cy: api.getHeight() / 2.65,
                          r: Math.min(api.getWidth(), api.getHeight()) / 3.3,
                          startAngle: ((0 + angle) * Math.PI) / 180,
                          endAngle: ((90 + angle) * Math.PI) / 180,
                      },
                      style: {
                          stroke: '#00FEFF',
                          fill: 'transparent',
                          lineWidth: 1.5,
                      },
                      silent: true,
                  };
              },
              data: [0],
          },
          // 外点
          {
              name: 'ring5', //紫点
              type: 'custom',
              coordinateSystem: 'none',
              renderItem: function (params, api) {
                  let x0 = api.getWidth() / 2;
                  let y0 = api.getHeight() / 2.68;
                  let r = Math.min(api.getWidth(), api.getHeight()) / 3.3;
                  let point = _self.getCirlPoint(x0, y0, r, 90 + angle);
                  return {
                      type: 'circle',
                      shape: {
                          cx: point.x,
                          cy: point.y,
                          r: 4,
                      },
                      style: {
                          stroke: '#00FEFF', //绿
                          fill: '#00FEFF',
                      },
                      silent: true,
                  };
              },
              data: [0],
          },

          // 外线
          {
              name: 'ring5',
              type: 'custom',
              coordinateSystem: 'none',
              renderItem: function (params, api) {
                  return {
                      type: 'arc',
                      shape: {
                          cx: api.getWidth() / 2,
                          cy: api.getHeight() / 2.68,
                          r: Math.min(api.getWidth(), api.getHeight()) / 3.3,
                          startAngle: ((180 + angle) * Math.PI) / 180,
                          endAngle: ((270 + angle) * Math.PI) / 180,
                      },
                      style: {
                          stroke: '#00FEFF',
                          fill: 'transparent',
                          lineWidth: 1.5,
                      },
                      silent: true,
                  };
              },
              data: [0],
          },
          // 蓝色 -- 外点
          {
              name: 'ring5', 
              type: 'custom',
              coordinateSystem: 'none',
              renderItem: function (params, api) {
                  let x0 = api.getWidth() / 2;
                  let y0 = api.getHeight() / 2.68;
                  let r = Math.min(api.getWidth(), api.getHeight()) / 3.3;
                  let point = _self.getCirlPoint(x0, y0, r, 180 + angle);
                  return {
                      type: 'circle',
                      shape: {
                          cx: point.x,
                          cy: point.y,
                          r: 4,
                      },
                      style: {
                          stroke: '#00FEFF', //绿
                          fill: '#00FEFF',
                      },
                      silent: true,
                  };
              },
              data: [0],
          },
          {
              name: 'ring5',
              type: 'custom',
              coordinateSystem: 'none',
              renderItem: function (params, api) {
                  return {
                      type: 'arc',
                      shape: {
                          cx: api.getWidth() / 2,
                          cy: api.getHeight() / 2.68,
                          r: Math.min(api.getWidth(), api.getHeight()) / 3.8,
                          startAngle: ((270 + -angle) * Math.PI) / 180,
                          endAngle: ((40 + -angle) * Math.PI) / 180,
                      },
                      style: {
                          stroke: '#00FEFF',
                          fill: 'transparent',
                          lineWidth: 1.5,
                      },
                      silent: true,
                  };
              },
              data: [0],
          },
          // 橘色
          {
              name: 'ring5',
              type: 'custom',
              coordinateSystem: 'none',
              renderItem: function (params, api) {
                  return {
                      type: 'arc',
                      shape: {
                          cx: api.getWidth() / 2,
                          cy: api.getHeight() / 2.68,
                          r: Math.min(api.getWidth(), api.getHeight()) / 3.8,
                          startAngle: ((90 + -angle) * Math.PI) / 180,
                          endAngle: ((220 + -angle) * Math.PI) / 180,
                      },
                      style: {
                          stroke: '#00FEFF',
                          fill: 'transparent',
                          lineWidth: 1.5,
                      },
                      silent: true,
                  };
              },
              data: [0],
          },
          {
              name: 'ring5',
              type: 'custom',
              coordinateSystem: 'none',
              renderItem: function (params, api) {
                  let x0 = api.getWidth() / 2;
                  let y0 = api.getHeight() / 2.68;
                  let r = Math.min(api.getWidth(), api.getHeight()) / 3.8;
                  let point = _self.getCirlPoint(x0, y0, r, 90 + -angle);
                  return {
                      type: 'circle',
                      shape: {
                          cx: point.x,
                          cy: point.y,
                          r: 4,
                      },
                      style: {
                          stroke: '#00FEFF', //粉
                          fill: '#00FEFF',
                      },
                      silent: true,
                  };
              },
              data: [0],
          },
          {
              name: 'ring5', //绿点
              type: 'custom',
              coordinateSystem: 'none',
              renderItem: function (params, api) {
                  let x0 = api.getWidth() / 2;
                  let y0 = api.getHeight() / 2.68;
                  let r = Math.min(api.getWidth(), api.getHeight()) / 3.8;
                  let point = _self.getCirlPoint(x0, y0, r, 270 + -angle);
                  return {
                      type: 'circle',
                      shape: {
                          cx: point.x,
                          cy: point.y,
                          r: 4,
                      },
                      style: {
                          stroke: '#00FEFF', //绿
                          fill: '#00FEFF',
                      },
                      silent: true,
                  };
              },
              data: [0],
          },
      ];
      for (let i = 0; i < list.length; i++) {
          data.push(
              {
                  value: list[i].value,
                  name: list[i].name,
                  itemStyle: {
                      normal: {
                          borderWidth: 5,
                          shadowBlur: 20,
                          borderColor: color[i],
                          shadowColor: color[i],
                      },
                  },
              },
              {
                  value: 2,
                  name: '',
                  itemStyle: {
                    label: {
                        show: false,
                    },
                    normal: {
                        labelLine: {
                          show: false,
                        },
                        color: 'rgba(0, 0, 0, 0)',
                        borderColor: 'rgba(0, 0, 0, 0)',
                        borderWidth: 0,
                    },
                  },
              }
          )
        }
    return {
          color,
          title: {
              text: '问题类型',
              textAlign: 'center',
              left: '49%',
              top: '34%',
              textStyle: {
                  fontWeight: 'normal',
                  fontSize: 14,
                  color: '#bbd0e8',
                  textAlign: 'center',
              },
          },
          // 内环
          graphic: {
              elements: [
                  {
                      type: 'image',
                      z: 3,
                      style: {
                          image: img,
                          width: 80,
                          height: 80,
                      },
                      left: 'center',
                      top: '25%',
                      position: [100, 100],
                  },
              ],
          },
          tooltip: {
              show: false,
          },
          legend: {
              icon: 'circle',
              orient: 'horizontal',
              y: '76%',
              data: list.map(i => i.name),
              align: 'left',
              textStyle: {
                  fontSize: 12,
                  color: '#bbd0e8',
              },
              itemGap: 5,
          },
          toolbox: {
              show: false,
          },
          series: seriesOption,
      };
    },
     //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
    getCirlPoint(x0, y0, r, angle) {
      let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
      let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
      return {
          x: x1,
          y: y1
      }
    }
  },
  mounted() {
    let _self = this;
    _self.$nextTick(() => {
      _self.initEcharts(_self.$refs['col-2-row-2'], _self.config, _self.col2row2)
    })
  }
}
</script>
<style lang="scss" scoped>
.col-2-row-2 {
  width: 400px;
  height: 300px;
  background-color: rgb(4, 36, 63);
}
</style>

因为Vue2 停止维护了嘛，所以我们要与时俱进。


Vue3 + Ts 版本：

需要注意：
this.dom.getContext is not a function
这个报错是指图表的实例对象只能通过document 获取，不可以用ref<'ElFormInstance>()
也就是27行和30行

“echarts”指 UMD 全局，但当前文件是模块。请考虑改为添加导入
这句说的是echarts应该通过全局引入的方式，可以通过npm安装echarts 解决，也可以在适当的位置全局引入echarts 脚本

<template>
  <div class="p-2">
    <div ref="col2Row2" class="col-2-row-2"></div>
  </div>
</template>

<script setup name="echarts" lang="ts">
import { getCurrentInstance, ref } from 'vue';

// 数据列表
const config = reactive({
  list: [
    {name: "垃圾治理", id: "scene_type_2", value: 11},
    {name: "生活垃圾", id: "random_clap_type_3", value: 5},
    {name: "水域治理", id: "scene_type_5", value: 1},
    {name: "生活污水", id: "random_clap_type_2", value: 4},
    {name: "文明乡风", id: "random_clap_type_6", value: 10},
    {name: "农业废弃物", id: "random_clap_type_4", value: 2},
    {name: "农村厕所", id: "random_clap_type_1", value: 6},
    {name: "其他问题", id: "random_clap_type_7", value: 0},
    {name: "基础设施", id: "scene_type_3", value: 6},
    {name: "村容村貌", id: "scene_type_1", value: 19},
    {name: "蓝天守卫", id: "scene_type_4", value: 2},
  ]
})
// 图表ref
const col2Row2 = ref<ElFormInstance>();

onMounted(() => {
  initEcharts(document.querySelector('.col-2-row-2'), config, row2Config)
})

// 初始化
const initEcharts = (dom: any, config: Object, fn: Function) => {
  let _self = this, angle = 0;
  let myChart = echarts.init(dom, undefined);
  setInterval(() => {
    angle = angle + 3
    let option = fn(_self, config, angle)
    myChart.setOption(option, true);
    // eslint-disable-next-line no-undef
    // tools.loopShowTooltip(myChart, option, {loopSeries: true});
  }, 120);
}

// 配置
const row2Config = (vm:any, config = {list: []}, angle = 0) => {
  let data:any = [];//角度，用来做简单的动画效果的
  let { list = [{value: '', name: ''}] } = config
  let _self = this;
  let img = 'data:image/png;base64,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'
  let color=['#FF801C', '#F5FF46', '#00FE65', '#00FEFF', '#ffa800', '#ff5b00', '#ff3000']
  let seriesOption = [
    {
      name: '',
      type: 'pie',
      clockWise: false,
      radius: ['33%', '38%'],
      y: '-25%',
      hoverAnimation: false,
      label: {
        show: true,
        position: 'outside',
        color: '#ddd',
        normal: {
          show: true,
          textStyle: {
            fontSize: 12,
            color: '#bbd0e8'
          }
        },
      },
      itemStyle: {
        normal: {
          labelLine: {
            length: 20,
            length2: 40,
            show: true,
            color: '#00ffff',
          },
          // 数据 百分比
          label: {
            formatter: function (params:any) {
              let percent:number = 0;
              let total:number = 0;
              for (let i = 0; i < list.length; i++) {
                total += +(list[i].value);
              }
              percent = +((params.value / total) * 100).toFixed(0);
              if (params.name !== '') {
                return params.name + '：' + percent + '%';
              } else {
                return '';
              }
            },
          }
        },
      },
      data: data,
    },
    // 外线
    {
      name: 'ring5',
      type: 'custom',
      coordinateSystem: 'none',
      renderItem: function (params:any, api:any) {
        return {
          type: 'arc',
          shape: {
            cx: api.getWidth() / 2,
            cy: api.getHeight() / 2.65,
            r: Math.min(api.getWidth(), api.getHeight()) / 3.3,
            startAngle: ((0 + angle) * Math.PI) / 180,
            endAngle: ((90 + angle) * Math.PI) / 180,
          },
          style: {
            stroke: '#00FEFF',
            fill: 'transparent',
            lineWidth: 1.5,
          },
          silent: true,
        };
      },
      data: [0],
    },
    // 外点
    {
      name: 'ring5', //紫点
      type: 'custom',
      coordinateSystem: 'none',
      renderItem: function (params:any, api:any) {
        let x0 = api.getWidth() / 2;
        let y0 = api.getHeight() / 2.68;
        let r = Math.min(api.getWidth(), api.getHeight()) / 3.3;
        let point = getCirlPoint(x0, y0, r, 90 + angle);
        return {
          type: 'circle',
          shape: {
            cx: point.x,
            cy: point.y,
            r: 4,
          },
          style: {
            stroke: '#00FEFF', //绿
            fill: '#00FEFF',
          },
          silent: true,
        };
      },
      data: [0],
    },
    // 外线
    {
      name: 'ring5',
      type: 'custom',
      coordinateSystem: 'none',
      renderItem: function (params:any, api:any) {
        return {
          type: 'arc',
          shape: {
            cx: api.getWidth() / 2,
            cy: api.getHeight() / 2.68,
            r: Math.min(api.getWidth(), api.getHeight()) / 3.3,
            startAngle: ((180 + angle) * Math.PI) / 180,
            endAngle: ((270 + angle) * Math.PI) / 180,
          },
          style: {
            stroke: '#00FEFF',
            fill: 'transparent',
            lineWidth: 1.5,
          },
          silent: true,
        };
      },
      data: [0],
    },
    // 蓝色 -- 外点
    {
      name: 'ring5', 
      type: 'custom',
      coordinateSystem: 'none',
      renderItem: function (params:any, api:any) {
        let x0 = api.getWidth() / 2;
        let y0 = api.getHeight() / 2.68;
          let r = Math.min(api.getWidth(), api.getHeight()) / 3.3;
          let point = getCirlPoint(x0, y0, r, 180 + angle);
          return {
            type: 'circle',
            shape: {
              cx: point.x,
              cy: point.y,
              r: 4,
            },
            style: {
              stroke: '#00FEFF', //绿
              fill: '#00FEFF',
            },
            silent: true,
          };
        },
      data: [0],
    },
    {
      name: 'ring5',
      type: 'custom',
      coordinateSystem: 'none',
      renderItem: function (params:any, api:any) {
        return {
          type: 'arc',
            shape: {
              cx: api.getWidth() / 2,
              cy: api.getHeight() / 2.68,
              r: Math.min(api.getWidth(), api.getHeight()) / 3.8,
              startAngle: ((270 + -angle) * Math.PI) / 180,
              endAngle: ((40 + -angle) * Math.PI) / 180,
            },
            style: {
              stroke: '#00FEFF',
              fill: 'transparent',
              lineWidth: 1.5,
            },
            silent: true,
          };
        },
      data: [0],
    },
    // 橘色
    {
      name: 'ring5',
      type: 'custom',
      coordinateSystem: 'none',
      renderItem: function (params:any, api:any) {
        return {
          type: 'arc',
          shape: {
            cx: api.getWidth() / 2,
            cy: api.getHeight() / 2.68,
            r: Math.min(api.getWidth(), api.getHeight()) / 3.8,
            startAngle: ((90 + -angle) * Math.PI) / 180,
            endAngle: ((220 + -angle) * Math.PI) / 180,
          },
          style: {
            stroke: '#00FEFF',
            fill: 'transparent',
            lineWidth: 1.5,
          },
          silent: true,
        };
      },
      data: [0],
    },
    {
      name: 'ring5',
      type: 'custom',
      coordinateSystem: 'none',
      renderItem: function (params:any, api:any) {
        let x0 = api.getWidth() / 2;
        let y0 = api.getHeight() / 2.68;
        let r = Math.min(api.getWidth(), api.getHeight()) / 3.8;
        let point = getCirlPoint(x0, y0, r, 90 + -angle);
        return {
          type: 'circle',
          shape: {
            cx: point.x,
            cy: point.y,
            r: 4,
          },
          style: {
            stroke: '#00FEFF', //粉
            fill: '#00FEFF',
          },
          silent: true,
        };
      },
      data: [0],
    },
    {
      name: 'ring5', //绿点
      type: 'custom',
      coordinateSystem: 'none',
      renderItem: function (params:any, api:any) {
        let x0 = api.getWidth() / 2;
        let y0 = api.getHeight() / 2.68;
        let r = Math.min(api.getWidth(), api.getHeight()) / 3.8;
        let point = getCirlPoint(x0, y0, r, 270 + -angle);
        return {
          type: 'circle',
          shape: {
            cx: point.x,
            cy: point.y,
            r: 4,
          },
          style: {
            stroke: '#00FEFF', //绿
            fill: '#00FEFF',
          },
          silent: true,
        };
      },
      data: [0],
    },
  ];
  for (let i = 0; i < list.length; i++) {
    data.push(
      {
        value: list[i].value,
        name: list[i].name,
        itemStyle: {
          normal: {
            borderWidth: 5,
            shadowBlur: 20,
            borderColor: color[i],
            shadowColor: color[i],
          },
        },
      },
      {
        value: 2,
        name: '',
        itemStyle: {
          label: {
            show: false,
          },
          normal: {
            labelLine: {
              show: false,
            },
            color: 'rgba(0, 0, 0, 0)',
            borderColor: 'rgba(0, 0, 0, 0)',
            borderWidth: 0,
          },
        },
      }
    )
  }
  return {
    color,
    title: {
      text: '问题类型',
      textAlign: 'center',
      left: '49%',
      top: '34%',
      textStyle: {
        fontWeight: 'normal',
        fontSize: 14,
        color: '#bbd0e8',
        textAlign: 'center',
      },
    },
    // 内环
    graphic: {
      elements: [
        {
          type: 'image',
          z: 3,
          style: {
            image: img,
            width: 80,
            height: 80,
          },
          left: 'center',
          top: '25%',
          position: [100, 100],
        },
      ],
    },
    tooltip: {
      show: false,
    },
    legend: {
      icon: 'circle',
      orient: 'horizontal',
      y: '76%',
      data: list.map(i => i.name),
      align: 'left',
      textStyle: {
        fontSize: 12,
        color: '#bbd0e8',
      },
      itemGap: 5,
    },
    toolbox: {
      show: false,
    },
    series: seriesOption,
  };
}

//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
const getCirlPoint = (x0:number, y0:number, r:number, angle:number) => {
  let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
  let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
  return {
    x: x1,
    y: y1
  }
}

</script>
<style lang="scss" scoped>
.col-2-row-2 {
  width: 400px;
  height: 300px;
  background-color: rgb(4, 36, 63);
}
</style>

到底了！原创不易，转载请注明出处。
请添加图片描述

  前端的学习不是一蹴而就，不积跬步无以至千里，不积小流无以成江海。持续不断的努力才能让你我有所收获

推荐阅读：

Vue自定义轮播
Vue动态换肤
css圣诞树 立体模型
vue Tips 轻提示
vue系列自定义加载页
CSS手绘图形

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【RabbitMQ】死信（延迟队列）的使用

【RabbitMQ】死信（延迟队列）的使用

目录 一、介绍 1、什么是死信队列(延迟队列) 2、应用场景 3、死信队列(延迟队列)的使用 4、死信消息来源 二、案例实践 1、案例一 2、案例二&#xff08;消息接收确认 &#xff09; 3、总结 一、介绍 1、什么是死信队列(延迟队列) 死信&#xff0c;在官网中对应的单词…
阅读更多...
脉脉爆料，鹅厂IEG，T11大佬，年终奖94w。。。

脉脉爆料，鹅厂IEG，T11大佬，年终奖94w。。。

今年行情确实是非常艰难&#xff0c;很多朋友表示年终奖减半或者没了 &#xff0c;不过来看看互联网大厂&#xff0c;互联网大厂年终奖确实比较给力&#xff0c;这是我个人亲身感受&#xff0c;运气好的时候年终奖让人吃惊。 比如&#xff0c;一个来自鹅厂IEG T11大佬再脉脉爆n…
阅读更多...
【深度优先搜索】【C++算法】834 树中距离之和

【深度优先搜索】【C++算法】834 树中距离之和

作者推荐 【动态规划】【map】【C算法】1289. 下降路径最小和 II 本文涉及知识点 深度优先搜索 树 图论 LeetCode834 树中距离之和 给定一个无向、连通的树。树中有 n 个标记为 0…n-1 的节点以及 n-1 条边 。 给定整数 n 和数组 edges &#xff0c; edges[i] [ai, bi]表…
阅读更多...
核心类库ArrayList、hashMap等

核心类库ArrayList、hashMap等

八. 核心类库 1. ArrayList 数组缺点 ArrayList&#xff0c;它常常被用来替代数组 数组的缺点&#xff1a;不能自动扩容&#xff0c;比如已经创建了大小为 5 的数组&#xff0c;再想放入一个元素&#xff0c;就放不下了&#xff0c;需要创建更大的数组&#xff0c;还得把旧…
阅读更多...
python 学习之 re库的基本使用（正则匹配）上

python 学习之 re库的基本使用（正则匹配）上

目录 一、基本用法 二、函数介绍 1、match函数 2、search 函数 3、compile 函数 4、findall 和 finditer 函数 5、sub 函数和 subn 函数 6、split 函数 一、基本用法 首先我们需要引入 re 库 代码基本框架使用两行代码实现 测试代码&#xff1a; import reret re.m…
阅读更多...
Pandas设置图像宽高、分辨率、背景色、显示中文、增加子区域、图题、坐标名称、网格线

Pandas设置图像宽高、分辨率、背景色、显示中文、增加子区域、图题、坐标名称、网格线

figure方法 figure方法可以设置绘图对象的长、宽、分辨率及背景颜色等。 import pandas as pd import matplotlib.pyplot as pltdata pd.read_csv(data/iris.csv) plt.figure(figsize(12, 3), dpi120, facecolorred) x data[sepal_length] plt.plot(x) plt.show()一个平面多…
阅读更多...
【K8S 云原生】K8S的安全机制

【K8S 云原生】K8S的安全机制

目录 一、K8S安全机制概述 1、概念 2、请求apiserver资源的三个步骤&#xff1a; 一、认证&#xff1a;Anthentcation 1、认证的方式&#xff1a; 1、HTTP TOKEN&#xff1a; 2、http base&#xff1a; 3、http证书&#xff1a; 2、认证的访问类型&#xff1a; 3、签发…
阅读更多...
【并发编程】指令集并行原理

【并发编程】指令集并行原理

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;并发编程 ⛺️稳重求进&#xff0c;晒太阳 指令集并行原理 名词&#xff1a; Clock Cycle Time CPU的Clock Cycle Time(时钟周期时间)&#xff0c;等于主频的倒数。意思是CPU能识别的最…
阅读更多...
VR数字展厅，平面静态跨越到3D立体化时代

VR数字展厅，平面静态跨越到3D立体化时代

近些年&#xff0c;VR的概念被越来越多的人提起&#xff0c;较为常见的形式就是VR数字展厅。VR数字展厅的出现&#xff0c;让各地以及各行业的展厅展馆的呈现和宣传都发生了很大的改变和革新&#xff0c;同时也意味着展览传播的方式不再局限于原来的图文、视频&#xff0c;而是…
阅读更多...
redis的备份原理

redis的备份原理

1 Redis持久化之RDB 1RDB是什么 在指定的时间间隔内将内存中的数据集快照写入磁盘&#xff0c; 也就是行话讲的Snapshot快照&#xff0c;它恢复时是将快照文件直接读到内存里 2备份是如何执行的 Redis会单独创建&#xff08;fork&#xff09;一个子进程来进行持久化&#x…
阅读更多...
星环科技基于第五代英特尔®至强®可扩展处理器的分布式向量数据库解决方案重磅发布

星环科技基于第五代英特尔®至强®可扩展处理器的分布式向量数据库解决方案重磅发布

12月15日&#xff0c;2023 英特尔新品发布会暨 AI 技术创新派对上&#xff0c;星环科技基于第五代英特尔至强可扩展处理器的Transwarp Hippo分布式向量数据库解决方案重磅发布。该方案利用第五代英特尔至强可扩展处理器带来的强大算力&#xff0c;实现了约 2 倍的代际性能提升&…
阅读更多...
2021 Google Chrome RCE漏洞分析

2021 Google Chrome RCE漏洞分析

一、复现环境&#xff1a; Win10 Google Chrome 86.0.4240.75 二、利用复现&#xff1a; 关闭沙箱安全使用命令进行关闭 &#xff0c;在正常情况下&#xff0c;浏览器沙箱提供了一个受限制的执行环境&#xff0c;以防止恶意代码对用户系统的损害。关闭沙箱可能会导致浏览器执…
阅读更多...
银行数据仓库体系实践（7）--数据模型设计及流程

银行数据仓库体系实践（7）--数据模型设计及流程

数据仓库作为全行或全公司的数据中心和总线&#xff0c;汇集了全行各系统以及外部数据&#xff0c;通过良好的系统架构可以保证系统稳定性和处理高效性&#xff0c;那如何保障系统数据的完备性、规范性和统一性呢&#xff1f;这里就需要有良好的数据分区和数据模型&#xff0c;…
阅读更多...
「JavaSE」抽象类接口3

「JavaSE」抽象类接口3

&#x1f387;个人主页&#xff1a;Ice_Sugar_7 &#x1f387;所属专栏&#xff1a;快来卷Java啦 &#x1f387;欢迎点赞收藏加关注哦&#xff01; 抽象类&接口3 &#x1f349;Clonable 接口和深拷贝&#x1f34c;浅拷贝和深拷贝 &#x1f349;Object类&#x1f349;抽象类…
阅读更多...
Effective C++ 学习

Effective C++ 学习

Effective C浅浅学习&#xff0c;很多不太理解 尽量用const, enum, inline 替换#define尽可能使用const确认对象在使用前就已经被初始化构造&#xff0c;析构&#xff0c;赋值运算&#xff0c;拷贝构造为多态基类声明virtual析构函数不要让析构函数抛出异常不在构造和析构过程中…
阅读更多...
javaWebssh宠物基地管理系统myeclipse开发mysql数据库MVC模式java编程计算机网页设计

javaWebssh宠物基地管理系统myeclipse开发mysql数据库MVC模式java编程计算机网页设计

一、源码特点 java ssh宠物基地管理系统是一套完善的web设计系统&#xff08;系统采用ssh框架进行设计开发&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用 B/S模式开发。开发环境为TOMCAT7.…
阅读更多...
跨平台Recorder录音插件：支持多种格式、音频可视化、实时上传、语音识别

跨平台Recorder录音插件：支持多种格式、音频可视化、实时上传、语音识别

视频教程地址&#xff1a;【跨平台Recorder录音插件&#xff1a;支持多种格式、音频可视化、实时上传、语音识别】 https://www.bilibili.com/video/BV1jQ4y1c7e4/?share_sourcecopy_web&vd_sourcee66c0e33402a09ca7ae1f0ed3d5ecf7c /** 先引入Recorder &#xff08; 需先…
阅读更多...
幻兽帕鲁服务器数据备份

幻兽帕鲁服务器数据备份

搭建幻兽帕鲁个人服务器&#xff0c;最近不少用户碰到内存不足、游戏坏档之类的问题。做好定时备份&#xff0c;才能轻松快速恢复游戏进度 这里讲一下如何定时将服务器数据备份到腾讯云轻量对象存储服务&#xff0c;以及如何在有需要的时候进行数据恢复。服务器中间的数据迁移…
阅读更多...
CI/CD

CI/CD

介绍一下CI/CD CI/CD的出现改变了开发人员和测试人员发布软件的方式,从最初的瀑布模型,到最后的敏捷开发(Agile Development),再到今天的DevOps,这是现代开发人员构建出色产品的技术路线 随着DevOps的兴起,出现了持续集成,持续交付和持续部署的新方法,传统的软件开发和交付方…
阅读更多...
一文学习Thrift RPC

一文学习Thrift RPC

Thrift RPC引言 Thrift RPC的特点 Thrift 是一个RPC的框架&#xff0c;和Hessian RPC有什么区别&#xff0c;最重要的区别是Thrift可以做异构系统开发。 什么是异构系统&#xff0c;服务的提供者和服务的调用者是用不同语言开发的。 为什么会当前系统会有异构系统的调用&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023