vue中echarts图无法渲染 50C

我在父组件中定义了一个容器,然后定义了echarts图的基本配置项,在created中调用一个方法,获取后台数据,然后将数据传递到子组件中渲染echarts图,现在数据都能成功传递,但是一直无法成功渲染echarts图

以下为父组件代码

// 父组件代码
<template>
  <div>
    <div class="leftChart">
      <linegraph :id="'leftChart'" :data="option1" style="height:330px;width:100%"></linegraph>
    </div>
  </div>
</template>

<script>
// 引入子组件
import linegraph from "./EchartsShow.vue";
// 引入网络请求方法
import { getSumData } from "@/api/crd/orgLimitView/orgView"
export default {
  data () {
    return {
      // echarts图基本配置项,未定义具体数据
      option1: {
        title: {
          text: '授信额度结构',
          subtext: '行业维度',
          x: 'center',
          top: '3%'
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: 'vertical',
          left: '2%',
          top: '2%'
        },
        series: [
          {
            name: '行业',
            type: 'pie',
            radius: '55%',
            center: ['50%', '55%'],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
    }
  },
  created () {
    this.getSum()
  },
  methods: {
    getSum () {
      // 调用get请求方法,获取后台数据,由于进度问题,目前只能传递固定的参数,才能获取到测试数据
      getSumData('1', '01000').then(res => {
        if (res.status != 200) {
          return this.$message.error('获取数据失败,请重试')
        }
        const datas = res.data.data
        // 由于拿到的数据非常复杂繁多,需要进行一些处理,才能拿到需要的数据
        this.option1.legend.data = this.tableDatas.map(item => {
          // 由于后台拿到的数据,都是数字类的码值,this.dicInd[item.industry] 用来翻译后台数据
          return this.dicInd[item.industry]
        })
        this.option1.series[0].data = this.tableDatas.map(item => {
          return { value: item.approveExpAmount, name: this.dicInd[item.industry] }
        })
        console.log(this.option1.legend.data, '行业');
        console.log(this.option1.series[0].data, '行业带数据');
      })
    }
  },
  components: {
    linegraph
  }
}
</script>

以下为子组件代码

// 子组件代码
<template>
  <div v-bind:id="id" v-bind:data="data"></div>
</template>

<script>
import echarts from "echarts";
export default {
  name: "echartsShow",
  data () {
    return {
      ChartLineGraph: null
    };
  },
  //  深度监听 父组件刚开始没有值,只有图标的配置项
  //  父组件ajax请求后改变数据的值,传递过来,图标已生成,监听传过来的值的改变
  watch: {
    data: {
      deep: true,
      handler: function (newVal, oldVal) {
        if (newvalue) {
          this.drawLineGraph(this.id, newVal)
        } else {
          this.drawLineGraph(this.id, oldVal)
        }
      }
    }
  },
  props: ["id", "data"],
  created() {
    console.log(this.data, '打印传递过来的图表数据')
  },
  mounted () {
    this.drawLineGraph(this.id, this.data);
    console.log(this.id, '打印id值')
    console.log(this.data, '打印data值')
  },
  methods: {
    drawLineGraph (id, data) {
      let _this = this;
      let myChart = document.getElementById(id);
      this.ChartLineGraph = echarts.init(myChart);
      this.ChartLineGraph.setOption(data);
      window.addEventListener("resize", function () {
        _this.ChartLineGraph.resize();
      });
    }
  },
  beforeDestroy () {
    if (this.ChartLineGraph) {
      this.ChartLineGraph.clear();
    }
  }
};
</script>

从后台获取数据后,成功传递给子组件,但是echarts无法成功渲染
图片说明
图片说明
图片说明
图片说明

经过多次尝试,我遇到了一个奇怪的问题
图片说明
图片说明

求各位大佬指点,我的代码哪个地方写错了,如何才能成功渲染echarts

2个回答

init和监听resize在 mounted 里搞一次就行了, 把 init 出来的 chart 对象存到数据变量里,每次 data 变化时只调用 setOption 就行了

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
请问下在vue中使用echarts,echarts中的X轴data为分钟,怎么写?

在vue中使用echarts,echarts中的X轴data为分钟,代码怎么写

vue中echarts通过axios获取到数据,但是前端页面图却显示不出来!

``` export default { data() { return { colors: [ "#f7797d", "#2C5364", "#40E0D0", "#12c2e9", "#1565C0", "#6b6b83", "#11998e", "#c94b4b", "#00b09b", "#CAC531" ], }; }, mounted() { this.drawChart(); }, methods: { //画图 drawChart() { //建立series1数组,用于存放遍历的series的数据配置信息 var series1 = []; var myChart = this.$echarts.init(document.getElementById("container")); let _that = this; //指定图表的配置项和数据 var option = { color: this.colors, legend: { show: true, orient: "vertical", right: 15, top: 35, itemGap: 30, textStyle: { //图例文字的样式 fontSize: 20 } }, grid: { height: 720, width: 1220, top: 40 }, xAxis: { type: "time", axisLine: { show: true }, axisLabel: { rotate: -11, margin: 20, fontWeight: "bold", fontSize: 14 } }, yAxis: [ { splitLine: { //网格线 lineStyle: { type: "solid" //设置网格线类型 }, show: true //隐藏或显示 }, axisLabel: { fontWeight: "bold", fontSize: 16 }, data: [ "2#回火炉", "1#回火炉", "2#冷水机", "1#清洗机", "4#加热炉", "3#加热炉", "2#加热炉", "1#加热炉" ] } ], //将配置信息数组,赋给series series: series1 }; //加载数据图表 //第二个参数为true的原因是防止多次请求造成数据错乱 //true:覆盖掉之前的配置信息 myChart.setOption(option, true); //显示等待画面 myChart.showLoading(); // 接收后端发送过来的数据 this.$axios({ method: "get", url: "/api/productiton" }) .then(res => { var result = res.data; //隐藏加载动画 myChart.hideLoading(); //循环series内的数据 for (var i = 0; i < result.length; i++) { series1.push({ type: "custom", name: result[i].name, renderItem: function(params, api) { var categoryIndex = api.value(0); var start = api.coord([api.value(1), categoryIndex]); var end = api.coord([api.value(2), categoryIndex]); var height = api.size([0, 1])[1] * 0.6; var rectShape = echarts.graphic.clipRectByRect( { x: start[0], y: start[1] - height / 2, width: end[0] - start[0], height: height }, { x: params.coordSys.x, y: params.coordSys.y, width: params.coordSys.width, height: params.coordSys.height } ); return ( rectShape && { type: "rect", shape: _that.$echarts.graphic.clipRectByRect( { x: start[0], y: start[1] - height / 2, width: end[0] - start[0], height: height }, { x: params.coordSys.x, y: params.coordSys.y, width: params.coordSys.width, height: params.coordSys.height } ), style: api.style() } ); }, itemStyle: { opacity: 1 }, encode: { x: [1, 2], y: 0 }, data: result[i].equipment }); } }) .catch(error => { console.log(error); }); //清空数组,避免多次请求,数据重复添加 series1 = []; } } }; ```

#vue+echarts 遇到的参数问题??

我在使用vue +echarts 遇到这个问题,就是当我在前台获取到后台的数据后 并且将后台获取到的数据通过for 循环将参数转换成数组格式,并让他赋值到显示的地方,但是不知道因为什么原因前台总是显示不了数据。 ##也不知道是不是因为数据格式原因?各位大佬请帮忙看一看这是个什么问题??? 这是从后台获得数据并且将数据push 到定义好的空数组里。 ![图片说明](https://img-ask.csdn.net/upload/202006/01/1591001367_662363.jpg) 这是定义的空数组。 ![图片说明](https://img-ask.csdn.net/upload/202006/01/1591001465_727520.jpg) 这个是将定义好的数组赋值给要显示的x 轴。 ![图片说明](https://img-ask.csdn.net/upload/202006/01/1591001791_299985.jpg) 这个是在前台console打印出来的数据。 ![图片说明](https://img-ask.csdn.net/upload/202006/01/1591001602_53679.jpg)

vue中使用echarts,数据更新后无法重新绘制图表?

      getTransformerSubstation3 () {         // this.myChart3.clear()         this.myChart3 = this.$echarts.init(document.getElementById('oneChart3'))         api           .getTransformerSubstation3(this.bdzparams)           .then(data => {             this.transformerSubstationList3 = data             let option = {               yAxis: {                 type: 'category',                 data: this.transformerSubstationList3.data.Asix,               },               xAxis: {                 type: 'value',               },               series: [                 {                   data: this.transformerSubstationList3.data.data0,                   type: 'bar',                   itemStyle: {                     normal: {                       color: '#32b16c',                       label: {                         show: true,                         position: 'right',                         textStyle: {                           color: 'black',                           fontSize: 10,                         },                       },                     },                   },                   barWidth: 20,                 },               ],               grid: {                 x: '3%',                 y: '20%',                 bottom: '3%',                 containLabel: true,               },                        },               },             }             this.myChart3.setOption(option)           })       },

【Vue 使用 echarts 问题】一个组件内多次引用 echart 渲染错乱问题

我用了一个 Tab 页切换时绘制折线图,图相同,只是不同 Tab 页有的元素不一样,抽取了一个公共组件,并用了一个标识控制。 但是绘图时发现切换 Tab 时第二个页面总是空白的图,这是在怎么回事呢?怎么解决呢?

关于在tab中使用echarts大小为0的问题

小弟最近写一个程序时需要实现一个在tab栏中切换不同的echarts图标的显示问题:在tab栏切换后再切换回来其父盒子div有大小,但是echarts大小为0x0; 同时自己再测了一下,当我跳转到没有echarts的页面再跳转回有echarts的后echarts能正常显示,但是从一个有echarts页面A跳到另一个有echarts的页面B第一次可以成功,但再从B跳会A时,A中其它元素可以正常显示,但是echarts就是显示不出来,已经卡了好几天了,网上的方法也试了一下不知道是不是自己试的方法对不对,拜托各位大神帮忙看看谢谢! ![图片说明](https://img-ask.csdn.net/upload/202003/09/1583726384_608296.png) ![图片说明](https://img-ask.csdn.net/upload/202003/09/1583726395_852700.png) 实现过程是用把echarts放在不同的div中,通过tab按下时捕获的值给current从而让相应的div中的图表显示出来: ``` <div v-if="current === 'month'"> <div class="wrap"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleAccessBarInit" canvasId="accessBarCharts" ref="accessBarCharts" /> </div> <div class="wrap"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleBarInit" ref="barCharts" canvasId="bar" /> </div> <div class="wrap1"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleLineInit" ref="lineCharts" canvasId="line" /> </div> </div> <div v-if="current === 'quarter'"> <div class="wrap"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleAccessBarInit" canvasId="accessBarCharts" ref="accessBarCharts" /> </div> <div class="wrap"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleBarInit" ref="barCharts" canvasId="bar" /> </div> <div class="wrap1"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleLineInit" ref="lineCharts" canvasId="line" /> </div> </div> ``` 当按下了相应的tab后,会调用相应的获取数据函数: ``` // tab栏切换 handleChangeTabbar(e) { this.current = e.target.key; console.log("按下了tab栏"); console.log(this.current); if(this.current=="seven"){this.getChartData(7);} else if(this.current == "month"){ this.getChartData(30);} else if(this.current == "quarter"){this.getChartData(90)} else if(this.current == "halfyear"){this.getChartData(180)} else if(this.current == "year"){this.getChartData(365)} } ``` 在获取数据函数中最后调用了图表的初始化函数init: ``` async getChartData(typeChange) { const body = { stationId: this.stationId, "access-token": this.accessToken, type:typeChange } console.log(body) const resp = await post('/station/data_statistics', body); console.log(resp) const { code, data } = resp; let barXAxisData = []; let barSeriesData = []; let barAccessXAxisData = []; let barAccessSeriesData = []; let lineXAxisData = []; let lineSeriesData = []; let lineAccessSeriesData = []; let lineTotalSeriesData = []; if (code === 200) { console.log(data) let axleTotalNum = 0; let axleAccessNum = 0; let totalNum = 0; let accessNum = 0; // 遍历各车轴总车数 for(var k = 0, length = data.axleTotalNum.length; k < length; k++){ // 分别将对象中数据提到数组中,然后轴数给x轴,将总数给y轴 barXAxisData.push(data.axleTotalNum[k].axle) barSeriesData.push(data.axleTotalNum[k].num) // 把所有车轴的过车数加起来,在左上角显示过车总数 axleTotalNum = axleTotalNum + data.axleTotalNum[k].num } // 遍历各车轴超车数 for(var k = 0, length = data.axleAccessNum.length; k < length; k++){ barAccessXAxisData.push(data.axleAccessNum[k].axle) barAccessSeriesData.push(data.axleAccessNum[k].num) // 把所有车轴的超车数加起来,在右上角显示超车总数 axleAccessNum = axleAccessNum + data.axleAccessNum[k].num } // 遍历7日中各日过车总数 for(var k = 0, length = data.totalNum.length; k < length; k++){ //把日期存进x轴的数组 lineXAxisData.push(data.totalNum[k].day) // 把具体每日数目存进y轴的数组 lineTotalSeriesData.push(data.totalNum[k].num) // 统计的是7日的过车总数,其实与上面的各轴车过车总数结果一样 totalNum = totalNum + data.totalNum[k].num } // 遍历7日中各日超车总数 for(var k = 0, length = data.excessNum.length; k < length; k++){ console.log(k) // 只统计y轴数据即可,因为其与7日过车数在折线图中一起显示,上面已经有x轴 lineAccessSeriesData.push(data.excessNum[k].num) accessNum = accessNum + data.excessNum[k].num } console.log(lineXAxisData,barSeriesData,barAccessXAxisData,barAccessSeriesData,lineXAxisData,lineSeriesData) // 把折线图中的两个y轴数组存到同一个数组中? lineSeriesData.push(lineAccessSeriesData, lineTotalSeriesData); console.log(lineXAxisData) // 其实这4个变量是两两相等的 this.accessNum = accessNum; this.totalNum = totalNum; this.axleTotalNum = axleTotalNum; this.axleAccessNum = axleAccessNum; } console.log(lineXAxisData, lineSeriesData) this.initBarChart(barXAxisData, barSeriesData,typeChange) this.initAccessBarChart(barAccessXAxisData, barAccessSeriesData,typeChange) this.initLineChart(lineXAxisData, lineSeriesData,typeChange) }, ``` 图表初始函数如下,其中写明了一些图表基础设置并进行setoption: ``` initBarChart(xAxisData, seriesData,typeChange) { if(typeChange==7){ this.barOption = { title: { text: "近七日过车车型", textStyle: { fontSize: 14 }, left: 'center' }, legend: { right: '14', data: [{name:'车轴数'}] }, grid: { left: 10, right: 20, bottom: 15, top: 30, containLabel: true }, color: ['#2d8cf0', '#19be6b', '#ff9900'], xAxis: { type: 'category', data: xAxisData, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'bar', name: '车轴数', label: { normal: { show: true, position: 'inside' } }, data: seriesData }] } } else if(typeChange==30){ this.barOption = { title: { text: "近一月过车车型", textStyle: { fontSize: 14 }, left: 'center' }, legend: { right: '14', data: [{name:'车轴数'}] }, grid: { left: 10, right: 20, bottom: 15, top: 30, containLabel: true }, color: ['#2d8cf0', '#19be6b', '#ff9900'], xAxis: { type: 'category', data: xAxisData, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'bar', name: '车轴数', label: { normal: { show: true, position: 'inside' } }, data: seriesData }] } }else if(typeChange==90){ this.barOption = { title: { text: "近一季过车车型", textStyle: { fontSize: 14 }, left: 'center' }, legend: { right: '14', data: [{name:'车轴数'}] }, grid: { left: 10, right: 20, bottom: 15, top: 30, containLabel: true }, color: ['#2d8cf0', '#19be6b', '#ff9900'], xAxis: { type: 'category', data: xAxisData, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'bar', name: '车轴数', label: { normal: { show: true, position: 'inside' } }, data: seriesData }] } }else if(typeChange==180){ this.barOption = { title: { text: "近半年过车车型", textStyle: { fontSize: 14 }, left: 'center' }, legend: { right: '14', data: [{name:'车轴数'}] }, grid: { left: 10, right: 20, bottom: 15, top: 30, containLabel: true }, color: ['#2d8cf0', '#19be6b', '#ff9900'], xAxis: { type: 'category', data: xAxisData, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'bar', name: '车轴数', label: { normal: { show: true, position: 'inside' } }, data: seriesData }] } } this.$refs.barCharts.init() }, ``` 最后再于图表的html部分中绑定了下面函数进行渲染: ``` handleBarInit (canvas, width, height) { console.log("打印表2宽高"); console.log(this.wdith); console.log(this.height); barChart = echarts.init(canvas, null, { width: width, height: height, }) canvas.setChart(barChart) barChart.setOption(this.barOption,true) return barChart }, ``` 最后附上该页面完整代码,请大家帮忙看看谢谢~ ``` <template> <div class="historyContainer"> <div v-if="current === 'seven'"> <i-row> <i-col span="8" offset="2" i-class="col-class"> <div class="headerCard"> <h4>近七日过车数:</h4> <p>{{totalNum}}</p> </div> </i-col> <i-col span="8" offset="4" i-class="col-class"> <div class="headerCard"> <h4>近七日超车数:</h4> <p>{{accessNum}}</p> </div> </i-col> </i-row> <div class="wrap"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleAccessBarInit" canvasId="accessBarCharts" ref="accessBarCharts" /> </div> <div class="wrap"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleBarInit" ref="barCharts" canvasId="bar" /> </div> <div class="wrap1"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleLineInit" ref="lineCharts" canvasId="line" /> </div> </div> <div v-if="current === 'month'"> <i-row> <i-col span="8" offset="2" i-class="col-class"> <div class="headerCard"> <h4>近一月过车数:</h4> <p>{{totalNum}}</p> </div> </i-col> <i-col span="8" offset="4" i-class="col-class"> <div class="headerCard"> <h4>近一月超车数:</h4> <p>{{accessNum}}</p> </div> </i-col> </i-row> <div class="wrap"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleAccessBarInit" canvasId="accessBarCharts" ref="accessBarCharts" /> </div> <div class="wrap"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleBarInit" ref="barCharts" canvasId="bar" /> </div> <div class="wrap1"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleLineInit" ref="lineCharts" canvasId="line" /> </div> </div> <div v-if="current === 'quarter'"> <i-row> <i-col span="8" offset="2" i-class="col-class"> <div class="headerCard"> <h4>近一季过车数:</h4> <p>{{totalNum}}</p> </div> </i-col> <i-col span="8" offset="4" i-class="col-class"> <div class="headerCard"> <h4>近一季超车数:</h4> <p>{{accessNum}}</p> </div> </i-col> </i-row> <div class="wrap"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleAccessBarInit" canvasId="accessBarCharts" ref="accessBarCharts" /> </div> <div class="wrap"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleBarInit" ref="barCharts" canvasId="bar" /> </div> <div class="wrap1"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleLineInit" ref="lineCharts" canvasId="line" /> </div> </div> <div v-if="current === 'halfyear'"> <i-row> <i-col span="8" offset="2" i-class="col-class"> <div class="headerCard"> <h4>近半年过车数:</h4> <p>{{totalNum}}</p> </div> </i-col> <i-col span="8" offset="4" i-class="col-class"> <div class="headerCard"> <h4>近半年超车数:</h4> <p>{{accessNum}}</p> </div> </i-col> </i-row> <div class="wrap"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleAccessBarInit" canvasId="accessBarCharts" ref="accessBarCharts" /> </div> <div class="wrap"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleBarInit" ref="barCharts" canvasId="bar" /> </div> <div class="wrap1"> <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleLineInit" ref="lineCharts" canvasId="line" /> </div> </div> <div v-if="current === 'year'"> 这是一年 </div> <i-tab-bar fixed="true" :current="current" @change="handleChangeTabbar"> <i-tab-bar-item key="seven" icon="computer" current-icon="computer_fill" title="近一周"></i-tab-bar-item> <i-tab-bar-item key="month" icon="dynamic" current-icon="dynamic_fill" title="近一月"></i-tab-bar-item> <i-tab-bar-item key="quarter" icon="addressbook" current-icon="addressbook_fill" title="近一季"></i-tab-bar-item> <i-tab-bar-item key="halfyear" icon="setup" current-icon="setup_fill" title="近半年"></i-tab-bar-item> <i-tab-bar-item key="year" icon="mine" current-icon="mine_fill" title="近一年"></i-tab-bar-item> </i-tab-bar> </div> </template> <script> import echarts from 'echarts' import mpvueEcharts from 'mpvue-echarts'; import { post } from '@/api/request.js'; let barChart, accessBarChart, lineChart; export default { onLoad(options) { const { stationId, accessToken } = options; this.stationId = stationId; this.accessToken = accessToken; }, data() { return { current:'seven', stationId: '', accessToken: '', echarts, totalNum: 0, accessNum: 0, axleTotalNum: 0, axleAccessNum: 0, // type:7,//暂时默认七天 barOption: null, accessBarOption: null, lineOption: null } }, components: { mpvueEcharts }, mounted() { this.getChartData(7); }, methods: { initBarChart(xAxisData, seriesData,typeChange) { if(typeChange==7){ this.barOption = { title: { text: "近七日过车车型", textStyle: { fontSize: 14 }, left: 'center' }, legend: { right: '14', data: [{name:'车轴数'}] }, grid: { left: 10, right: 20, bottom: 15, top: 30, containLabel: true }, color: ['#2d8cf0', '#19be6b', '#ff9900'], xAxis: { type: 'category', data: xAxisData, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'bar', name: '车轴数', label: { normal: { show: true, position: 'inside' } }, data: seriesData }] } } else if(typeChange==30){ this.barOption = { title: { text: "近一月过车车型", textStyle: { fontSize: 14 }, left: 'center' }, legend: { right: '14', data: [{name:'车轴数'}] }, grid: { left: 10, right: 20, bottom: 15, top: 30, containLabel: true }, color: ['#2d8cf0', '#19be6b', '#ff9900'], xAxis: { type: 'category', data: xAxisData, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'bar', name: '车轴数', label: { normal: { show: true, position: 'inside' } }, data: seriesData }] } }else if(typeChange==90){ this.barOption = { title: { text: "近一季过车车型", textStyle: { fontSize: 14 }, left: 'center' }, legend: { right: '14', data: [{name:'车轴数'}] }, grid: { left: 10, right: 20, bottom: 15, top: 30, containLabel: true }, color: ['#2d8cf0', '#19be6b', '#ff9900'], xAxis: { type: 'category', data: xAxisData, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'bar', name: '车轴数', label: { normal: { show: true, position: 'inside' } }, data: seriesData }] } }else if(typeChange==180){ this.barOption = { title: { text: "近半年过车车型", textStyle: { fontSize: 14 }, left: 'center' }, legend: { right: '14', data: [{name:'车轴数'}] }, grid: { left: 10, right: 20, bottom: 15, top: 30, containLabel: true }, color: ['#2d8cf0', '#19be6b', '#ff9900'], xAxis: { type: 'category', data: xAxisData, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'bar', name: '车轴数', label: { normal: { show: true, position: 'inside' } }, data: seriesData }] } } this.$refs.barCharts.init() }, handleBarInit (canvas, width, height) { console.log("打印表2宽高"); console.log(this.wdith); console.log(this.height); barChart = echarts.init(canvas, null, { width: width, height: height, }) canvas.setChart(barChart) barChart.setOption(this.barOption,true) return barChart }, initAccessBarChart(xAxisData, seriesData,typeChange) { if(typeChange==7){ this.accessBarOption = { title: { text: "近七日超车车型", textStyle: { fontSize: 14 }, left: 'center' }, legend: { right: '14', data: [{name:'车轴数'}] }, grid: { left: 10, right: 20, bottom: 15, top: 30, containLabel: true }, color: ['#5cadff', '#19be6b', '#ff9900'], xAxis: { type: 'category', data: xAxisData, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'bar', name: '车轴数', label: { normal: { show: true, position: 'inside' } }, data: seriesData }] } } else if(typeChange==30){ this.accessBarOption = { title: { text: "近一月超车车型", textStyle: { fontSize: 14 }, left: 'center' }, legend: { right: '14', data: [{name:'车轴数'}] }, grid: { left: 10, right: 20, bottom: 15, top: 30, containLabel: true }, color: ['#5cadff', '#19be6b', '#ff9900'], xAxis: { type: 'category', data: xAxisData, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'bar', name: '车轴数', label: { normal: { show: true, position: 'inside' } }, data: seriesData }] } }else if(typeChange==90){ this.accessBarOption = { title: { text: "近一季超车车型", textStyle: { fontSize: 14 }, left: 'center' }, legend: { right: '14', data: [{name:'车轴数'}] }, grid: { left: 10, right: 20, bottom: 15, top: 30, containLabel: true }, color: ['#5cadff', '#19be6b', '#ff9900'], xAxis: { type: 'category', data: xAxisData, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'bar', name: '车轴数', label: { normal: { show: true, position: 'inside' } }, data: seriesData }] } }else if(typeChange==180){ this.accessBarOption = { title: { text: "近半年超车车型", textStyle: { fontSize: 14 }, left: 'center' }, legend: { right: '14', data: [{name:'车轴数'}] }, grid: { left: 10, right: 20, bottom: 15, top: 30, containLabel: true }, color: ['#5cadff', '#19be6b', '#ff9900'], xAxis: { type: 'category', data: xAxisData, }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'bar', name: '车轴数', label: { normal: { show: true, position: 'inside' } }, data: seriesData }] } } this.$refs.accessBarCharts.init() }, handleAccessBarInit (canvas, width, height) { console.log("打印表1宽高"); console.log(this.wdith); console.log(this.height); accessBarChart = echarts.init(canvas, null, { width: width, height: height }) canvas.setChart(accessBarChart) accessBarChart.setOption(this.accessBarOption,true) return accessBarChart }, initLineChart(xAxisData, seriesData,typeChange) { if(typeChange==7){ this.lineOption = { title: { text: "近7日车流量和超车数", textStyle: { fontSize: 14 }, left: 'center' }, tooltip: { show: true, trigger: 'axis', formatter: '日期:{b}\n{a0}: {c1}\n{a1}: {c0}' }, legend: { right: '14', orient: 'vertical', data: [{name:'总数'},{name:"超载数"}] }, grid: { left: 10, right: 20, bottom: 15, top: 50, containLabel: true }, color: ['#5cadff', '#ff9900'], xAxis: { data: xAxisData, triggerEvent : true }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'line', name: '超载数', data: seriesData[0] },{ type: 'line', name: '总数', data: seriesData[1] }] } } else if(typeChange==30){ this.lineOption = { title: { text: "近一月车流量和超车数", textStyle: { fontSize: 14 }, left: 'center' }, tooltip: { show: true, trigger: 'axis', formatter: '日期:{b}\n{a0}: {c1}\n{a1}: {c0}' }, legend: { right: '14', orient: 'vertical', data: [{name:'总数'},{name:"超载数"}] }, grid: { left: 10, right: 20, bottom: 15, top: 50, containLabel: true }, color: ['#5cadff', '#ff9900'], xAxis: { data: xAxisData, triggerEvent : true }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'line', name: '超载数', data: seriesData[0] },{ type: 'line', name: '总数', data: seriesData[1] }] } } else if(typeChange==90){ this.lineOption = { title: { text: "近一季车流量和超车数", textStyle: { fontSize: 14 }, left: 'center' }, tooltip: { show: true, trigger: 'axis', formatter: '日期:{b}\n{a0}: {c1}\n{a1}: {c0}' }, legend: { right: '14', orient: 'vertical', data: [{name:'总数'},{name:"超载数"}] }, grid: { left: 10, right: 20, bottom: 15, top: 50, containLabel: true }, color: ['#5cadff', '#ff9900'], xAxis: { data: xAxisData, triggerEvent : true }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'line', name: '超载数', data: seriesData[0] },{ type: 'line', name: '总数', data: seriesData[1] }] } } else if(typeChange==180){ this.lineOption = { title: { text: "近半年车流量和超车数", textStyle: { fontSize: 14 }, left: 'center' }, tooltip: { show: true, trigger: 'axis', formatter: '日期:{b}\n{a0}: {c1}\n{a1}: {c0}' }, legend: { right: '14', orient: 'vertical', data: [{name:'总数'},{name:"超载数"}] }, grid: { left: 10, right: 20, bottom: 15, top: 50, containLabel: true }, color: ['#5cadff', '#ff9900'], xAxis: { data: xAxisData, triggerEvent : true }, yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { color: '#666' } }, series:[{ type: 'line', name: '超载数', data: seriesData[0] },{ type: 'line', name: '总数', data: seriesData[1] }] } } this.$refs.lineCharts.init() }, handleLineInit (canvas, width, height) { console.log("打印表3宽高"); console.log(this.wdith); console.log(this.height); lineChart = echarts.init(canvas, null, { width: width, height: height }) canvas.setChart(lineChart) lineChart.setOption(this.lineOption,true) return lineChart }, async getChartData(typeChange) { const body = { stationId: this.stationId, "access-token": this.accessToken, type:typeChange } console.log(body) const resp = await post('/station/data_statistics', body); console.log(resp) const { code, data } = resp; let barXAxisData = []; let barSeriesData = []; let barAccessXAxisData = []; let barAccessSeriesData = []; let lineXAxisData = []; let lineSeriesData = []; let lineAccessSeriesData = []; let lineTotalSeriesData = []; if (code === 200) { console.log(data) let axleTotalNum = 0; let axleAccessNum = 0; let totalNum = 0; let accessNum = 0; // 遍历各车轴总车数 for(var k = 0, length = data.axleTotalNum.length; k < length; k++){ // 分别将对象中数据提到数组中,然后轴数给x轴,将总数给y轴 barXAxisData.push(data.axleTotalNum[k].axle) barSeriesData.push(data.axleTotalNum[k].num) // 把所有车轴的过车数加起来,在左上角显示过车总数 axleTotalNum = axleTotalNum + data.axleTotalNum[k].num } // 遍历各车轴超车数 for(var k = 0, length = data.axleAccessNum.length; k < length; k++){ barAccessXAxisData.push(data.axleAccessNum[k].axle) barAccessSeriesData.push(data.axleAccessNum[k].num) // 把所有车轴的超车数加起来,在右上角显示超车总数 axleAccessNum = axleAccessNum + data.axleAccessNum[k].num } // 遍历7日中各日过车总数 for(var k = 0, length = data.totalNum.length; k < length; k++){ //把日期存进x轴的数组 lineXAxisData.push(data.totalNum[k].day) // 把具体每日数目存进y轴的数组 lineTotalSeriesData.push(data.totalNum[k].num) // 统计的是7日的过车总数,其实与上面的各轴车过车总数结果一样 totalNum = totalNum + data.totalNum[k].num } // 遍历7日中各日超车总数 for(var k = 0, length = data.excessNum.length; k < length; k++){ console.log(k) // 只统计y轴数据即可,因为其与7日过车数在折线图中一起显示,上面已经有x轴 lineAccessSeriesData.push(data.excessNum[k].num) accessNum = accessNum + data.excessNum[k].num } console.log(lineXAxisData,barSeriesData,barAccessXAxisData,barAccessSeriesData,lineXAxisData,lineSeriesData) // 把折线图中的两个y轴数组存到同一个数组中? lineSeriesData.push(lineAccessSeriesData, lineTotalSeriesData); console.log(lineXAxisData) // 其实这4个变量是两两相等的 this.accessNum = accessNum; this.totalNum = totalNum; this.axleTotalNum = axleTotalNum; this.axleAccessNum = axleAccessNum; } console.log(lineXAxisData, lineSeriesData) this.initBarChart(barXAxisData, barSeriesData,typeChange) this.initAccessBarChart(barAccessXAxisData, barAccessSeriesData,typeChange) this.initLineChart(lineXAxisData, lineSeriesData,typeChange) }, // tab栏切换 handleChangeTabbar(e) { this.current = e.target.key; console.log("按下了tab栏"); console.log(this.current); if(this.current=="seven"){this.getChartData(7);} else if(this.current == "month"){ this.getChartData(30);} else if(this.current == "quarter"){this.getChartData(90)} else if(this.current == "halfyear"){this.getChartData(180)} else if(this.current == "year"){this.getChartData(365)} } } } </script> <style> .historyContainer{ width: 100%; height: 100%; } .headerCard{ display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 30px; border: 1px solid #ccc; margin-top: 10px; padding-top: 10px; padding-bottom: 10px; font-size: 14px; } .wrap{ margin-top: 20px; /* width:100%; */ width: 380px; height: 400px; } .wrap1{ margin-top: 20px; /* width:100%; */ width: 380px; height: 400px; margin-bottom: 50px } </style> ```

echarts 渲染失败,求助大神

想法是点击产生一个dialog,在其中写html语句,产生div之后画图, 但是画的图偶尔有时候会空白,请问什么原因呢? ![图片说明](https://img-ask.csdn.net/upload/201905/06/1557108454_98574.png)![图片说明](https://img-ask.csdn.net/upload/201905/06/1557108518_395324.png)

echarts官方实例地图无法显示,求大佬指导

![官方效果图](https://img-ask.csdn.net/upload/201912/17/1576548751_224459.png) 代码如下: ![图片说明](https://img-ask.csdn.net/upload/201912/17/1576549230_979425.png) ![图片说明](https://img-ask.csdn.net/upload/201912/17/1576549249_270606.png) ![图片说明](https://img-ask.csdn.net/upload/201912/17/1576549340_330603.png) 我自己的效果 ![图片说明](https://img-ask.csdn.net/upload/201912/17/1576549437_760562.png) 我是引入有问题还是怎么样呢,求大佬指教

elementUI标签页<el-tabs>不能及时渲染echarts图

# 问题 使用v-echarts和elementUI的标签页。 首次默认进入第一个标签页可以直接渲染,但是进入第二个标签页和第三个标签页不能及时渲染,都需要缩放一下页面才能渲染出来,控制台也没有任何错误,这是怎么回事? ![图片说明](https://img-ask.csdn.net/upload/202003/29/1585458892_997049.gif) # 代码 代码已经被简化,但问题依然存在。 ``` <template> <div> <el-card class="el-card"> <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card"> <!--======标签页1====三个标签页内容是同样的数据====--> <el-tab-pane label="标签页1" name="one"> <ve-pie :data="chartData"></ve-pie> </el-tab-pane> <!--==========标签页2=======--> <el-tab-pane label="标签页2" name="two"> <ve-pie :data="chartData"></ve-pie> </el-tab-pane> <!--=========标签页3==============--> <el-tab-pane label="标签页3" name="three"> <ve-pie :data="chartData"></ve-pie> </el-tab-pane> </el-tabs> </el-card> </div> </template> <script> export default { name: "IncomeStatistics", data() { return { activeName: 'one', //当前激活的标签页 chartData: { columns: ['日期', '访问用户'], rows: [ {'日期': '1/1', '访问用户': 1393}, {'日期': '1/2', '访问用户': 3530}, {'日期': '1/3', '访问用户': 2923}, {'日期': '1/4', '访问用户': 1723}, {'日期': '1/5', '访问用户': 3792}, {'日期': '1/6', '访问用户': 4593} ] }, }; }, methods: { //切换标签页时触发 handleClick(tab, event) { this.activeName = tab.name; }, } } </script> <style scoped> </style> ```

echarts如何动态获取后台数据

不知道怎么在echarts里面去取ajax里面传回来的数据。

echarts dataZoom事件

怎样在echarts dataZoom事件中获取到数据的dataIndex?

vue如何将api请求收到的数据动态的显示到模板上呢?

我使用的是uniapp的框架,与vue差不多。我在请求服务端的数据后会返回给我一段数据,我想将这段数据动态的显示在模板上,请问该如何实现呢?网络请求的数据已经拿到了,但是是在请求的回调函数中。 ``` onLoad() { uni.request({ url: 'http://hd215.api.okayapi.com/?s=App.Main_Meta.Get&', method: 'GET', data: { key: 'usermeta', app_key: --- }, success: (res) => { // res.data.data.data; console.log(res.data.data.data) uni.showToast({ title: '查询成功!', mask: true, duration: 1500 }); }, }); }, ``` onload下为页面加载时执行的方法,uni.request为发起请求的方法。控制台输出为 ``` add_time:"2019-01-19 00:53:17" data:{content: "哈哈哈哈哈"} err_code:0 err_msg:"" key:"usermeta" update_time:"" ```

echarts绘制大数量折线图太卡,绘制很慢

![图片说明](https://img-ask.csdn.net/upload/201812/12/1544606295_390651.png) echarts绘制大数据量(不到1M)折线图的时候很卡,缩放功能也会很卡。有时候加载一个图谱需要几分钟。

Echarts图表响应式问题

最近刚开始接触Echarts可视化图标,使用的是bootstrap框架。bootstrap框架做出来的是响应式页面,但是发现Echarts的图表并不随之变化。最后在网上找到了几个方法。但是发现无论怎调整页面大小,图标依然是宽400px,高300px,故来求援,到底怎么才能让图表响应式变化 ``` <body> <div id="main" style="width: 400px; height: 300px;"></div> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); //window.onresize = myChart.resize;(行不通) window.addEventListener('resize',function(){ myChart.resize(); });(还是行不通) </script> </body> ``` 发现无论怎调整页面大小,图标依然是宽400px,高300px

如何实现echarts画图并每隔5秒定时刷新?

实现一个图表,用echarts画好了,但需要每隔5秒刷新数据生成新的图表<br> html: ``` <div class="chartContent"> <div id="multiple"></div> </div> ``` JS:<br> ``` var echart={ arrPrice:[], arrRate:[], time:[] }; //我用了一个getData()来通过ajax实现获取实时数据; function getData(){ $.ajax({ url:'mod.json', type:'post', async:true, data:'', dataType:'json', success:function(data){ for(i in data.result){ echart.arrPrice.push(data.result[i].price); echart.arrRate.push(data.result[i].rise); echart.time.push(data.result[i].time); } drawChart(); }, error:function(){ console.log('error') } }); } //drawChart()用来实现echarts画图; function drawChart(){ var dom = document.getElementById("multiple"); var myChart = echarts.init(dom); option = { xxx } ] }; if (option && typeof option === "object") { myChart.setOption(option, true); } } //然后实现5秒定时刷新 window.setInterval(function(){ getData() },3000); ``` 希望得到每5秒图表重绘,但现在结果是这样的: 初始: ![图片说明](https://img-ask.csdn.net/upload/201906/13/1560391448_826359.png) 5秒后: ![图片说明](https://img-ask.csdn.net/upload/201906/13/1560391463_647190.png) 10秒后:![图片说明](https://img-ask.csdn.net/upload/201906/13/1560391476_581010.png)

vue 左侧菜单展开隐藏重新渲染

左侧菜单隐藏的时候加载echarts图表 ![图片说明](https://img-ask.csdn.net/upload/201903/12/1552388722_787497.jpg) 点击展开左侧菜单时,echarts图表没有重新渲染 ,窗体布局变得很难看,如图 ![图片说明](https://img-ask.csdn.net/upload/201903/12/1552388835_817228.jpg) 一直没找到解决办法,求高手指点

ECharts获取当前图表数据问题

echarts请教一个问题,API中有这个方法myChart.getOption()是返回内部持有的。我用事件绑定的区域缩放,进行缩放时怎样获取当前图表所显示的数据呢(是当前所显示的)?

echarts在IE11中个的兼容问题

使用echarts搭配AJAX显示柱状图表时,在IE11上页面第一次打开时回去请求 后台刷新数据,但是只请求一次就不会再请求,手动刷新页面都无效,除非关闭页面重新 打开 ,这种情况在谷歌,火狐测试下没有问题!!! 请问是兼容问题还是缓存?? 急!!!!! ``` $(function () { var myChart = echarts.init(document.getElementById('main')); myChart.showLoading({ text: "KM数据正在努力加载..." }); // 初始 option option = { tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, legend: { data: ['考试通过', '学习时长/小时.分'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [ { type: 'category', data: [ ] } ], yAxis: [ { type: 'value' } ], toolbox: { show: true, feature: { //magicType: { type: ['line', 'bar'] }, dataView: { readOnly: false }, saveAsImage: {}, } }, series: [ ] }; myChart.setOption(option); var names = []; //盛放X轴坐标值 var nums = []; //盛放Y坐标值 var ntime=[0.15,1.32] $.get("Ashx/TestDemo.ashx?action=list", {}, function (data) { var msg = $.parseJSON(data); for (var i = 0; i < msg.length; i++) { names.push(msg[i].Sys_DeptName); nums.push(msg[i].count); } myChart.hideLoading(); myChart.setOption({ xAxis: [{ data: names }], series: [ { name: '考试通过', type: 'bar', data: nums }, { name: '学习时长/小时.分', type: 'bar', data: ntime }, ] }); }); }); ```

vue-cli项目懒加载路由之后打包文件比不路由懒加载还大

vue-cli项目懒加载路由之后打包文件比不路由懒加载还大,我没有使用懒加载,打包后app的那个js就1001k,我要是使用懒加载,那么9个页面,基本上每个页面的被打包之后都是300多k,完了还有一个app的js是500k左右,会大2M,这个是怎么回事,有什么方式解决吗? (我的项目中基本每个页面都使用echarts和百度地图api)

C/C++学习指南全套教程

C/C++学习的全套教程,从基本语法,基本原理,到界面开发、网络开发、Linux开发、安全算法,应用尽用。由毕业于清华大学的业内人士执课,为C/C++编程爱好者的教程。

定量遥感中文版 梁顺林著 范闻捷译

这是梁顺林的定量遥感的中文版,由范闻捷等翻译的,是电子版PDF,解决了大家看英文费时费事的问题,希望大家下载看看,一定会有帮助的

YOLOv3目标检测实战:训练自己的数据集

YOLOv3是一种基于深度学习的端到端实时目标检测方法,以速度快见长。本课程将手把手地教大家使用labelImg标注和使用YOLOv3训练自己的数据集。课程分为三个小项目:足球目标检测(单目标检测)、梅西目标检测(单目标检测)、足球和梅西同时目标检测(两目标检测)。 本课程的YOLOv3使用Darknet,在Ubuntu系统上做项目演示。包括:安装Darknet、给自己的数据集打标签、整理自己的数据集、修改配置文件、训练自己的数据集、测试训练出的网络模型、性能统计(mAP计算和画出PR曲线)和先验框聚类。 Darknet是使用C语言实现的轻型开源深度学习框架,依赖少,可移植性好,值得深入探究。 除本课程《YOLOv3目标检测实战:训练自己的数据集》外,本人推出了有关YOLOv3目标检测的系列课程,请持续关注该系列的其它课程视频,包括: 《YOLOv3目标检测实战:交通标志识别》 《YOLOv3目标检测:原理与源码解析》 《YOLOv3目标检测:网络模型改进方法》 敬请关注并选择学习!

sql语句 异常 Err] 1064 - You have an error in your SQL syntax; check the manual that corresponds to your

在我们开发的工程中,有时候会报 [Err] 1064 - You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ------ 这种异常 不用多想,肯定是我们的sql语句出现问题,下面...

浪潮集团 往年的软件类 笔试题 比较详细的哦

浪潮集团 往年的软件类 笔试题 比较详细的哦

2019 AI开发者大会

2019 AI开发者大会(AI ProCon 2019)是由中国IT社区CSDN主办的AI技术与产业年度盛会。多年经验淬炼,如今蓄势待发:2019年9月6-7日,大会将有近百位中美顶尖AI专家、知名企业代表以及千余名AI开发者齐聚北京,进行技术解读和产业论证。我们不空谈口号,只谈技术,诚挚邀请AI业内人士一起共铸人工智能新篇章!

I2c串口通信实现加速度传感器和FPGA的交流

此代码能实现加速度传感器与FPGA之间的交流,从而测出运动物体的加速度。

Python可以这样学(第一季:Python内功修炼)

董付国系列教材《Python程序设计基础》、《Python程序设计(第2版)》、《Python可以这样学》配套视频,讲解Python 3.5.x和3.6.x语法、内置对象用法、选择与循环以及函数设计与使用、lambda表达式用法、字符串与正则表达式应用、面向对象编程、文本文件与二进制文件操作、目录操作与系统运维、异常处理结构。

微信公众平台开发入门

本套课程的设计完全是为初学者量身打造,课程内容由浅入深,课程讲解通俗易懂,代码实现简洁清晰。通过本课程的学习,学员能够入门微信公众平台开发,能够胜任企业级的订阅号、服务号、企业号的应用开发工作。 通过本课程的学习,学员能够对微信公众平台有一个清晰的、系统性的认识。例如,公众号是什么,它有什么特点,它能做什么,怎么开发公众号。 其次,通过本课程的学习,学员能够掌握微信公众平台开发的方法、技术和应用实现。例如,开发者文档怎么看,开发环境怎么搭建,基本的消息交互如何实现,常用的方法技巧有哪些,真实应用怎么开发。

机器学习初学者必会的案例精讲

通过六个实际的编码项目,带领同学入门人工智能。这些项目涉及机器学习(回归,分类,聚类),深度学习(神经网络),底层数学算法,Weka数据挖掘,利用Git开源项目实战等。

eclipseme 1.7.9

eclipse 出了新的eclipseme插件,官方有下载,但特慢,我都下了大半天(可能自己网速差)。有急需要的朋友可以下哦。。。

Spring Boot -01- 快速入门篇(图文教程)

Spring Boot -01- 快速入门篇 今天开始不断整理 Spring Boot 2.0 版本学习笔记,大家可以在博客看到我的笔记,然后大家想看视频课程也可以到【慕课网】手机 app,去找【Spring Boot 2.0 深度实践】的课程,令人开心的是,课程完全免费! 什么是 Spring Boot? Spring Boot 是由 Pivotal 团队提供的全新框架。Spring Boot...

HoloLens2开发入门教程

本课程为HoloLens2开发入门教程,讲解部署开发环境,安装VS2019,Unity版本,Windows SDK,创建Unity项目,讲解如何使用MRTK,编辑器模拟手势交互,打包VS工程并编译部署应用到HoloLens上等。

最简单的倍频verilog程序(Quartus II)

一个工程文件 几段简单的代码 一个输入一个输出(50Mhz倍频到100Mhz)

计算机组成原理实验教程

西北工业大学计算机组成原理实验课唐都仪器实验帮助,同实验指导书。分为运算器,存储器,控制器,模型计算机,输入输出系统5个章节

4小时玩转微信小程序——基础入门与微信支付实战

这是一个门针对零基础学员学习微信小程序开发的视频教学课程。课程采用腾讯官方文档作为教程的唯一技术资料来源。杜绝网络上质量良莠不齐的资料给学员学习带来的障碍。 视频课程按照开发工具的下载、安装、使用、程序结构、视图层、逻辑层、微信小程序等几个部分组织课程,详细讲解整个小程序的开发过程

面试了一个 31 岁程序员,让我有所触动,30岁以上的程序员该何去何从?

最近面试了一个31岁8年经验的程序猿,让我有点感慨,大龄程序猿该何去何从。

基于RSA通信密钥分发的加密通信

基于RSA通信密钥分发的加密通信,采用pycrypto中的RSA、AES模块实现

不同变质程度煤尘爆炸残留气体特征研究

为分析不同变质程度煤尘爆炸残留气体成分的特征规律,利用水平管道煤尘爆炸实验装置进行了贫瘦煤、肥煤、气煤、长焰煤4种不同变质程度的煤尘爆炸实验,研究了不同变质程度煤尘爆炸后气体残留物含量的差异,并对气体

设计模式(JAVA语言实现)--20种设计模式附带源码

课程亮点: 课程培训详细的笔记以及实例代码,让学员开始掌握设计模式知识点 课程内容: 工厂模式、桥接模式、组合模式、装饰器模式、外观模式、享元模式、原型模型、代理模式、单例模式、适配器模式 策略模式、模板方法模式、观察者模式、迭代器模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式 课程特色: 笔记设计模式,用笔记串连所有知识点,让学员从一点一滴积累,学习过程无压力 笔记标题采用关键字标识法,帮助学员更加容易记住知识点 笔记以超链接形式让知识点关联起来,形式知识体系 采用先概念后实例再应用方式,知识点深入浅出 提供授课内容笔记作为课后复习以及工作备查工具 部分图表(电脑PC端查看):

MySQL数据库面试题(2020最新版)

文章目录数据库基础知识为什么要使用数据库什么是SQL?什么是MySQL?数据库三大范式是什么mysql有关权限的表都有哪几个MySQL的binlog有有几种录入格式?分别有什么区别?数据类型mysql有哪些数据类型引擎MySQL存储引擎MyISAM与InnoDB区别MyISAM索引与InnoDB索引的区别?InnoDB引擎的4大特性存储引擎选择索引什么是索引?索引有哪些优缺点?索引使用场景(重点)...

软件测试2小时入门

本课程内容系统、全面、简洁、通俗易懂,通过2个多小时的介绍,让大家对软件测试有个系统的理解和认识,具备基本的软件测试理论基础。 主要内容分为5个部分: 1 软件测试概述,了解测试是什么、测试的对象、原则、流程、方法、模型;&nbsp; 2.常用的黑盒测试用例设计方法及示例演示;&nbsp; 3 常用白盒测试用例设计方法及示例演示;&nbsp; 4.自动化测试优缺点、使用范围及示例‘;&nbsp; 5.测试经验谈。

几率大的Redis面试题(含答案)

本文的面试题如下: Redis 持久化机制 缓存雪崩、缓存穿透、缓存预热、缓存更新、缓存降级等问题 热点数据和冷数据是什么 Memcache与Redis的区别都有哪些? 单线程的redis为什么这么快 redis的数据类型,以及每种数据类型的使用场景,Redis 内部结构 redis的过期策略以及内存淘汰机制【~】 Redis 为什么是单线程的,优点 如何解决redis的并发竞争key问题 Red...

手把手实现Java图书管理系统(附源码)

【超实用课程内容】 本课程演示的是一套基于Java的SSM框架实现的图书管理系统,主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的java人群。详细介绍了图书管理系统的实现,包括:环境搭建、系统业务、技术实现、项目运行、功能演示、系统扩展等,以通俗易懂的方式,手把手的带你从零开始运行本套图书管理系统,该项目附带全部源码可作为毕设使用。 【课程如何观看?】 PC端:https://edu.csdn.net/course/detail/27513 移动端:CSDN 学院APP(注意不是CSDN APP哦) 本课程为录播课,课程2年有效观看时长,大家可以抓紧时间学习后一起讨论哦~ 【学员专享增值服务】 源码开放 课件、课程案例代码完全开放给你,你可以根据所学知识,自行修改、优化

jsp+servlet入门项目实例

jsp+servlet实现班级信息管理项目

winfrom中嵌套html,跟html的交互

winfrom中嵌套html,跟html的交互,源码就在里面一看就懂,很简单

Java面试题大全(2020版)

发现网上很多Java面试题都没有答案,所以花了很长时间搜集整理出来了这套Java面试题大全,希望对大家有帮助哈~ 本套Java面试题大全,全的不能再全,哈哈~ 一、Java 基础 1. JDK 和 JRE 有什么区别? JDK:Java Development Kit 的简称,java 开发工具包,提供了 java 的开发环境和运行环境。 JRE:Java Runtime Environ...

python实现数字水印添加与提取及鲁棒性测试(GUI,基于DCT,含测试图片)

由python写的GUI,可以实现数字水印的添加与提取,提取是根据添加系数的相关性,实现了盲提取。含有两种攻击测试方法(高斯低通滤波、高斯白噪声)。基于python2.7,watermark.py为主

Xshell6完美破解版,亲测可用

Xshell6破解版,亲测可用,分享给大家。直接解压即可使用

你连存活到JDK8中著名的Bug都不知道,我怎么敢给你加薪

CopyOnWriteArrayList.java和ArrayList.java,这2个类的构造函数,注释中有一句话 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 public ArrayList(Collection&lt;? ...

相关热词 c#对文件改写权限 c#中tostring c#支付宝回掉 c#转换成数字 c#判断除法是否有模 c# 横向chart c#控件选择多个 c#报表如何锁定表头 c#分级显示数据 c# 不区分大小写替换
立即提问
相关内容推荐