新手Echarts问题:为什么官网有些案例无法直接调用?

因为工作需要,公司最近需要我们去调用一下echarts。

因为以前没有用过echarts,只好先去学习一下。

今天在测试echarts时却发现了一个问题:

官网发的大部分案例都可以直接复制执行,还有一些是需要json文件的暂且不论。

今天测试的这个,我看过代码没有调用json文件的记录,却还是显示一片空白。

echarts环境:echarts用的是官网的2.08M的源码包,浏览器是 firfox.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
<script src="echarts.js"></script>
</head>
<body>
<div id="charts" style="position: absolute;width: 80%;height: 80%;">

</div>
</body>
<script>
    var charts=echarts.init(document.getElementById('charts'));

//为了代码可读性,我把系统给的数据全部以 data 代替
var data0 = [ data ];

var data = [ data ];

// See https://github.com/ecomfe/echarts-stat
var myRegression = ecStat.regression('logarithmic', data);

myRegression.points.sort(function(a, b) {
    return a[0] - b[0];
});

option = {
    legend: {
        data: ['1990', '2015'],
        bottom: 20
    },
    title: {
        text: '1990 and 2015 per capita life expectancy and GDP',
        subtext: 'By ecStat.regression',
        sublink: 'https://github.com/ecomfe/echarts-stat',
        left: 'center'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
    grid: {
        top: 80,
        bottom: 90
    },
    xAxis: {
        type: 'value',
        splitLine: {
            lineStyle: {
                type: 'dashed'
            }
        },
    },
    yAxis: {
        type: 'value',
        splitLine: {
            lineStyle: {
                type: 'dashed'
            }
        },
    },
    series: [{
        name: '1990',
        type: 'scatter',
        symbolSize: function(data) {
            return Math.sqrt(data[2]) / 5e2;
        },
        label: {
            emphasis: {
                show: true,
                formatter: function(param) {
                    return param.data[3];
                },
                position: 'top'
            }
        },
        itemStyle: {
            normal: {
                shadowBlur: 10,
                shadowColor: 'rgba(120, 36, 50, 0.5)',
                shadowOffsetY: 5,
                color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                    offset: 0,
                    color: 'rgb(251, 118, 123)'
                }, {
                    offset: 1,
                    color: 'rgb(204, 46, 72)'
                }])
            }
        },
        data: data0
    }, {
        name: '2015',
        type: 'scatter',
        symbolSize: function(data) {
            return Math.sqrt(data[2]) / 5e2;
        },
        label: {
            emphasis: {
                show: true,
                formatter: function(param) {
                    return param.data[3];
                },
                position: 'top'
            }
        },
        itemStyle: {
            normal: {
                shadowBlur: 10,
                shadowColor: 'rgba(25, 100, 150, 0.5)',
                shadowOffsetY: 5,
                color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                    offset: 0,
                    color: 'rgb(129, 227, 238)'
                }, {
                    offset: 1,
                    color: 'rgb(25, 183, 207)'
                }])
            }
        },
        data: data1
    }, {
        name: 'line',
        type: 'line',
        lineStyle: {
            normal: {
                color: '#2f4554'
            }
        },
        smooth: true,
        showSymbol: false,
        data: myRegression.points,
        markPoint: {
            itemStyle: {
                normal: {
                    color: 'transparent'
                }
            },
            label: {
                normal: {
                    show: true,
                    position: 'left',
                    formatter: myRegression.expression,
                    textStyle: {
                        color: '#333',
                        fontSize: 14
                    }
                }
            },
            data: [{
                coord: myRegression.points[myRegression.points.length - 1]
            }]
        }
    }]
};
    charts.setOption(option);
</script>
</html>

如果我数据的修改影响了判断,这里是源码--->Echarts代码源码

4个回答

echarts.js放在哪里了,是本地运行的么?firefox什么版本,换chrome试试看呢

weixin_42693699
枭筱龙 echarts.js和实例在同一个目录底下,firfox是最新版本,Chrome试过了,不可以,也是一片空白。。
一年多之前 回复

应该是echarts版本不对,你换下别的版本看下

https://gallery.echartsjs.com/help.html
你到官方贴下代码试试

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
百度echarts 的label:formatter 如何自己手动触发?

百度echarts 的label:formatter 如何自己手动触发? 想自己写一个js方法去控制触发回调函数

关于在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地图控件官方实例如何调用 显示地图

//问题描述: 调用了官网提供的地址但是就是不显示地图 //官网地址: https://www.echartsjs.com/examples/zh/editor.html?c=effectScatter-bmap //截图 ![图片说明](https://img-ask.csdn.net/upload/201910/17/1571241681_595745.jpg) //代码展示 ``` <script src="pcManager/dist/echarts.js"></script> <!-- 引入 vintage 主题 --> <script src="pcManager/theme/vintage.js"></script> <script> // 第二个参数可以指定前面引入的主题 var chart = echarts.init(document.getElementById('main'), 'vintage'); chart.setOption({ //把官网提供的option套进去 ... }); </script> ``` //目前显示的界面没有地图 ![图片说明](https://img-ask.csdn.net/upload/201910/17/1571241856_441443.jpg) //由于数据太多 把我的主要代码结构粘出来 ``` <head> <%--引入echarts控件--%> <script src="/erzhentang/FR-LIB/incubator-echarts-4.4.0/dist/echarts.js"></script> <!-- 引入 vintage 主题 --> <script src="/erzhentang/FR-LIB/incubator-echarts-4.4.0/theme/vintage.js"></script> <div id="dv_area" style="width: 800px;height:600px;"></div> <script type="text/javascript"> </head> <body> var myChart1 = echarts.init(document.getElementById('dv_area'),'vintage'); var data = [ {name: '海门', value: 9}, {name: '鄂尔多斯', value: 12}, {name: '招远', value: 12}, {name: '舟山', value: 12}, {name: '齐齐哈尔', value: 14}, {name: '盐城', value: 15}, {name: '赤峰', value: 16}, {name: '青岛', value: 18}, {name: '乳山', value: 18}, {name: '金昌', value: 19}, {name: '泉州', value: 21}, {name: '莱西', value: 21}, {name: '日照', value: 21}, {name: '胶南', value: 22}, {name: '南通', value: 23}, {name: '拉萨', value: 24}, {name: '云浮', value: 24}, {name: '梅州', value: 25}, {name: '文登', value: 25}, {name: '上海', value: 25}, {name: '攀枝花', value: 25}, {name: '威海', value: 25}, {name: '承德', value: 25}, {name: '厦门', value: 26}, {name: '汕尾', value: 26}, {name: '潮州', value: 26}, {name: '丹东', value: 27}, {name: '太仓', value: 27}, {name: '曲靖', value: 27}, {name: '烟台', value: 28}, {name: '福州', value: 29}, {name: '瓦房店', value: 30}, {name: '即墨', value: 30}, {name: '抚顺', value: 31}, {name: '玉溪', value: 31}, {name: '张家口', value: 31}, {name: '阳泉', value: 31}, {name: '莱州', value: 32}, {name: '湖州', value: 32}, {name: '汕头', value: 32}, {name: '昆山', value: 33}, {name: '宁波', value: 33}, {name: '湛江', value: 33}, {name: '揭阳', value: 34}, {name: '荣成', value: 34}, {name: '连云港', value: 35}, {name: '葫芦岛', value: 35}, {name: '常熟', value: 36}, {name: '东莞', value: 36}, {name: '河源', value: 36}, {name: '淮安', value: 36}, {name: '泰州', value: 36}, {name: '南宁', value: 37}, {name: '营口', value: 37}, {name: '惠州', value: 37}, {name: '江阴', value: 37}, {name: '蓬莱', value: 37}, {name: '韶关', value: 38}, {name: '嘉峪关', value: 38}, {name: '广州', value: 38}, {name: '延安', value: 38}, {name: '太原', value: 39}, {name: '清远', value: 39}, {name: '中山', value: 39}, {name: '昆明', value: 39}, {name: '寿光', value: 40}, {name: '盘锦', value: 40}, {name: '长治', value: 41}, {name: '深圳', value: 41}, {name: '珠海', value: 42}, {name: '宿迁', value: 43}, {name: '咸阳', value: 43}, {name: '铜川', value: 44}, {name: '平度', value: 44}, {name: '佛山', value: 44}, {name: '海口', value: 44}, {name: '江门', value: 45}, {name: '章丘', value: 45}, {name: '肇庆', value: 46}, {name: '大连', value: 47}, {name: '临汾', value: 47}, {name: '吴江', value: 47}, {name: '石嘴山', value: 49}, {name: '沈阳', value: 50}, {name: '苏州', value: 50}, {name: '茂名', value: 50}, {name: '嘉兴', value: 51}, {name: '长春', value: 51}, {name: '胶州', value: 52}, {name: '银川', value: 52}, {name: '张家港', value: 52}, {name: '三门峡', value: 53}, {name: '锦州', value: 54}, {name: '南昌', value: 54}, {name: '柳州', value: 54}, {name: '三亚', value: 54}, {name: '自贡', value: 56}, {name: '吉林', value: 56}, {name: '阳江', value: 57}, {name: '泸州', value: 57}, {name: '西宁', value: 57}, {name: '宜宾', value: 58}, {name: '呼和浩特', value: 58}, {name: '成都', value: 58}, {name: '大同', value: 58}, {name: '镇江', value: 59}, {name: '桂林', value: 59}, {name: '张家界', value: 59}, {name: '宜兴', value: 59}, {name: '北海', value: 60}, {name: '西安', value: 61}, {name: '金坛', value: 62}, {name: '东营', value: 62}, {name: '牡丹江', value: 63}, {name: '遵义', value: 63}, {name: '绍兴', value: 63}, {name: '扬州', value: 64}, {name: '常州', value: 64}, {name: '潍坊', value: 65}, {name: '重庆', value: 66}, {name: '台州', value: 67}, {name: '南京', value: 67}, {name: '滨州', value: 70}, {name: '贵阳', value: 71}, {name: '无锡', value: 71}, {name: '本溪', value: 71}, {name: '克拉玛依', value: 72}, {name: '渭南', value: 72}, {name: '马鞍山', value: 72}, {name: '宝鸡', value: 72}, {name: '焦作', value: 75}, {name: '句容', value: 75}, {name: '北京', value: 79}, {name: '徐州', value: 79}, {name: '衡水', value: 80}, {name: '包头', value: 80}, {name: '绵阳', value: 80}, {name: '乌鲁木齐', value: 84}, {name: '枣庄', value: 84}, {name: '杭州', value: 84}, {name: '淄博', value: 85}, {name: '鞍山', value: 86}, {name: '溧阳', value: 86}, {name: '库尔勒', value: 86}, {name: '安阳', value: 90}, {name: '开封', value: 90}, {name: '济南', value: 92}, {name: '德阳', value: 93}, {name: '温州', value: 95}, {name: '九江', value: 96}, {name: '邯郸', value: 98}, {name: '临安', value: 99}, {name: '兰州', value: 99}, {name: '沧州', value: 100}, {name: '临沂', value: 103}, {name: '南充', value: 104}, {name: '天津', value: 105}, {name: '富阳', value: 106}, {name: '泰安', value: 112}, {name: '诸暨', value: 112}, {name: '郑州', value: 113}, {name: '哈尔滨', value: 114}, {name: '聊城', value: 116}, {name: '芜湖', value: 117}, {name: '唐山', value: 119}, {name: '平顶山', value: 119}, {name: '邢台', value: 119}, {name: '德州', value: 120}, {name: '济宁', value: 120}, {name: '荆州', value: 127}, {name: '宜昌', value: 130}, {name: '义乌', value: 132}, {name: '丽水', value: 133}, {name: '洛阳', value: 134}, {name: '秦皇岛', value: 136}, {name: '株洲', value: 143}, {name: '石家庄', value: 147}, {name: '莱芜', value: 148}, {name: '常德', value: 152}, {name: '保定', value: 153}, {name: '湘潭', value: 154}, {name: '金华', value: 157}, {name: '岳阳', value: 169}, {name: '长沙', value: 175}, {name: '衢州', value: 177}, {name: '廊坊', value: 193}, {name: '菏泽', value: 194}, {name: '合肥', value: 229}, {name: '武汉', value: 273}, {name: '大庆', value: 279} ]; var geoCoordMap = { '海门': [121.15, 31.89], '鄂尔多斯': [109.781327, 39.608266], '招远': [120.38, 37.35], '舟山': [122.207216, 29.985295], '齐齐哈尔': [123.97, 47.33], '盐城': [120.13, 33.38], '赤峰': [118.87, 42.28], '青岛': [120.33, 36.07], '乳山': [121.52, 36.89], '金昌': [102.188043, 38.520089], '泉州': [118.58, 24.93], '莱西': [120.53, 36.86], '日照': [119.46, 35.42], '胶南': [119.97, 35.88], '南通': [121.05, 32.08], '拉萨': [91.11, 29.97], '云浮': [112.02, 22.93], '梅州': [116.1, 24.55], '文登': [122.05, 37.2], '上海': [121.48, 31.22], '攀枝花': [101.718637, 26.582347], '威海': [122.1, 37.5], '承德': [117.93, 40.97], '厦门': [118.1, 24.46], '汕尾': [115.375279, 22.786211], '潮州': [116.63, 23.68], '丹东': [124.37, 40.13], '太仓': [121.1, 31.45], '曲靖': [103.79, 25.51], '烟台': [121.39, 37.52], '福州': [119.3, 26.08], '瓦房店': [121.979603, 39.627114], '即墨': [120.45, 36.38], '抚顺': [123.97, 41.97], '玉溪': [102.52, 24.35], '张家口': [114.87, 40.82], '阳泉': [113.57, 37.85], '莱州': [119.942327, 37.177017], '湖州': [120.1, 30.86], '汕头': [116.69, 23.39], '昆山': [120.95, 31.39], '宁波': [121.56, 29.86], '湛江': [110.359377, 21.270708], '揭阳': [116.35, 23.55], '荣成': [122.41, 37.16], '连云港': [119.16, 34.59], '葫芦岛': [120.836932, 40.711052], '常熟': [120.74, 31.64], '东莞': [113.75, 23.04], '河源': [114.68, 23.73], '淮安': [119.15, 33.5], '泰州': [119.9, 32.49], '南宁': [108.33, 22.84], '营口': [122.18, 40.65], '惠州': [114.4, 23.09], '江阴': [120.26, 31.91], '蓬莱': [120.75, 37.8], '韶关': [113.62, 24.84], '嘉峪关': [98.289152, 39.77313], '广州': [113.23, 23.16], '延安': [109.47, 36.6], '太原': [112.53, 37.87], '清远': [113.01, 23.7], '中山': [113.38, 22.52], '昆明': [102.73, 25.04], '寿光': [118.73, 36.86], '盘锦': [122.070714, 41.119997], '长治': [113.08, 36.18], '深圳': [114.07, 22.62], '珠海': [113.52, 22.3], '宿迁': [118.3, 33.96], '咸阳': [108.72, 34.36], '铜川': [109.11, 35.09], '平度': [119.97, 36.77], '佛山': [113.11, 23.05], '海口': [110.35, 20.02], '江门': [113.06, 22.61], '章丘': [117.53, 36.72], '肇庆': [112.44, 23.05], '大连': [121.62, 38.92], '临汾': [111.5, 36.08], '吴江': [120.63, 31.16], '石嘴山': [106.39, 39.04], '沈阳': [123.38, 41.8], '苏州': [120.62, 31.32], '茂名': [110.88, 21.68], '嘉兴': [120.76, 30.77], '长春': [125.35, 43.88], '胶州': [120.03336, 36.264622], '银川': [106.27, 38.47], '张家港': [120.555821, 31.875428], '三门峡': [111.19, 34.76], '锦州': [121.15, 41.13], '南昌': [115.89, 28.68], '柳州': [109.4, 24.33], '三亚': [109.511909, 18.252847], '自贡': [104.778442, 29.33903], '吉林': [126.57, 43.87], '阳江': [111.95, 21.85], '泸州': [105.39, 28.91], '西宁': [101.74, 36.56], '宜宾': [104.56, 29.77], '呼和浩特': [111.65, 40.82], '成都': [104.06, 30.67], '大同': [113.3, 40.12], '镇江': [119.44, 32.2], '桂林': [110.28, 25.29], '张家界': [110.479191, 29.117096], '宜兴': [119.82, 31.36], '北海': [109.12, 21.49], '西安': [108.95, 34.27], '金坛': [119.56, 31.74], '东营': [118.49, 37.46], '牡丹江': [129.58, 44.6], '遵义': [106.9, 27.7], '绍兴': [120.58, 30.01], '扬州': [119.42, 32.39], '常州': [119.95, 31.79], '潍坊': [119.1, 36.62], '重庆': [106.54, 29.59], '台州': [121.420757, 28.656386], '南京': [118.78, 32.04], '滨州': [118.03, 37.36], '贵阳': [106.71, 26.57], '无锡': [120.29, 31.59], '本溪': [123.73, 41.3], '克拉玛依': [84.77, 45.59], '渭南': [109.5, 34.52], '马鞍山': [118.48, 31.56], '宝鸡': [107.15, 34.38], '焦作': [113.21, 35.24], '句容': [119.16, 31.95], '北京': [116.46, 39.92], '徐州': [117.2, 34.26], '衡水': [115.72, 37.72], '包头': [110, 40.58], '绵阳': [104.73, 31.48], '乌鲁木齐': [87.68, 43.77], '枣庄': [117.57, 34.86], '杭州': [120.19, 30.26], '淄博': [118.05, 36.78], '鞍山': [122.85, 41.12], '溧阳': [119.48, 31.43], '库尔勒': [86.06, 41.68], '安阳': [114.35, 36.1], '开封': [114.35, 34.79], '济南': [117, 36.65], '德阳': [104.37, 31.13], '温州': [120.65, 28.01], '九江': [115.97, 29.71], '邯郸': [114.47, 36.6], '临安': [119.72, 30.23], '兰州': [103.73, 36.03], '沧州': [116.83, 38.33], '临沂': [118.35, 35.05], '南充': [106.110698, 30.837793], '天津': [117.2, 39.13], '富阳': [119.95, 30.07], '泰安': [117.13, 36.18], '诸暨': [120.23, 29.71], '郑州': [113.65, 34.76], '哈尔滨': [126.63, 45.75], '聊城': [115.97, 36.45], '芜湖': [118.38, 31.33], '唐山': [118.02, 39.63], '平顶山': [113.29, 33.75], '邢台': [114.48, 37.05], '德州': [116.29, 37.45], '济宁': [116.59, 35.38], '荆州': [112.239741, 30.335165], '宜昌': [111.3, 30.7], '义乌': [120.06, 29.32], '丽水': [119.92, 28.45], '洛阳': [112.44, 34.7], '秦皇岛': [119.57, 39.95], '株洲': [113.16, 27.83], '石家庄': [114.48, 38.03], '莱芜': [117.67, 36.19], '常德': [111.69, 29.05], '保定': [115.48, 38.85], '湘潭': [112.91, 27.87], '金华': [119.64, 29.12], '岳阳': [113.09, 29.37], '长沙': [113, 28.21], '衢州': [118.88, 28.97], '廊坊': [116.7, 39.53], '菏泽': [115.480656, 35.23375], '合肥': [117.27, 31.86], '武汉': [114.31, 30.52], '大庆': [125.03, 46.58] }; var convertData = function (data) { var res = []; for (var i = 0; i < data.length; i++) { var geoCoord = geoCoordMap[data[i].name]; if (geoCoord) { res.push({ name: data[i].name, value: geoCoord.concat(data[i].value) }); } } return res; }; option = { title: { text: '全国主要城市空气质量 - 百度地图', subtext: 'data from PM25.in', sublink: 'http://www.pm25.in', left: 'center' }, tooltip: { trigger: 'item' }, bmap: { center: [104.114129, 37.550339], zoom: 5, roam: true, mapStyle: { styleJson: [{ 'featureType': 'water', 'elementType': 'all', 'stylers': { 'color': '#d1d1d1' } }, { 'featureType': 'land', 'elementType': 'all', 'stylers': { 'color': '#f3f3f3' } }, { 'featureType': 'railway', 'elementType': 'all', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'highway', 'elementType': 'all', 'stylers': { 'color': '#fdfdfd' } }, { 'featureType': 'highway', 'elementType': 'labels', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'arterial', 'elementType': 'geometry', 'stylers': { 'color': '#fefefe' } }, { 'featureType': 'arterial', 'elementType': 'geometry.fill', 'stylers': { 'color': '#fefefe' } }, { 'featureType': 'poi', 'elementType': 'all', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'green', 'elementType': 'all', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'subway', 'elementType': 'all', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'manmade', 'elementType': 'all', 'stylers': { 'color': '#d1d1d1' } }, { 'featureType': 'local', 'elementType': 'all', 'stylers': { 'color': '#d1d1d1' } }, { 'featureType': 'arterial', 'elementType': 'labels', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'boundary', 'elementType': 'all', 'stylers': { 'color': '#fefefe' } }, { 'featureType': 'building', 'elementType': 'all', 'stylers': { 'color': '#d1d1d1' } }, { 'featureType': 'label', 'elementType': 'labels.text.fill', 'stylers': { 'color': '#999999' } }] } }, series: [ { name: 'pm2.5', type: 'scatter', coordinateSystem: 'bmap', data: convertData(data), symbolSize: function (val) { return val[2] / 10; }, label: { normal: { formatter: '{b}', position: 'right', show: false }, emphasis: { show: true } }, itemStyle: { normal: { color: 'purple' } } }, { name: 'Top 5', type: 'effectScatter', coordinateSystem: 'bmap', data: convertData(data.sort(function (a, b) { return b.value - a.value; }).slice(0, 6)), symbolSize: function (val) { return val[2] / 10; }, showEffectOn: 'render', rippleEffect: { brushType: 'stroke' }, hoverAnimation: true, label: { normal: { formatter: '{b}', position: 'right', show: true } }, itemStyle: { normal: { color: 'purple', shadowBlur: 10, shadowColor: '#333' } }, zlevel: 1 } ] }; myChart1.setOption(option); </script> <body> ``` //已解决 需要引入必要的控件 ``` <%--引入echarts控件--%> <script src="/erzhentang/FR-LIB/incubator-echarts-4.4.0/dist/echarts.js"></script> <!-- 引入 vintage 主题 --> <script src="/erzhentang/FR-LIB/incubator-echarts-4.4.0/theme/vintage.js"></script> <%--引入地图所需控件--%> <script type="text/javascript" src="https://www.echartsjs.com/examples/vendors/lodash.js"></script> <script type="text/javascript" src="https://www.echartsjs.com/examples/javascripts/common.js"></script> <script type="text/javascript">function changeLang(lang) { if (lang === 'en') { if (location.hostname !== 'echarts.apache.org') { var re = new RegExp('/zh/', 'g'); var pathname = location.pathname.replace(re, '/en/'); var url = 'https://echarts.apache.org' + pathname + location.search + location.hash; location.href = url; return; } } location.href = location.href.replace( new RegExp('/(zh|en)/', 'g'), '/' + lang + '/' ); } window.ROOT_PATH = 'https://www.echartsjs.com/examples/'; </script> <script type="text/javascript" src="https://www.echartsjs.com/examples/vendors/dat.gui.min.js"></script> <script type="text/javascript" src="https://www.echartsjs.com/examples/vendors/ace/src/ace.js"></script> <script type="text/javascript" src="https://www.echartsjs.com/examples/vendors/ace/src/ext-language_tools.js"></script> <script type="text/javascript" src="https://www.echartsjs.com/examples/javascripts/editor.js?_v_=1571170137685"></script> <script type="text/javascript" src="https://www.echartsjs.com/examples/vendors/echarts-stat/ecStat.min.js?_v_=1571170137685"></script> <script type="text/javascript" src="https://www.echartsjs.com/examples/vendors/echarts/echarts.min.js?_v_=1571170137685"></script> <script type="text/javascript" src="https://www.echartsjs.com/examples/vendors/echarts/map/js/china.js?_v_=1571170137685"></script> <script type="text/javascript" src="https://www.echartsjs.com/examples/vendors/echarts/map/js/world.js?_v_=1571170137685"></script> <script type="text/javascript" src="https://www.echartsjs.com/examples/vendors/echarts/extension/dataTool.js?_v_=1571170137685"></script> <script type="text/javascript" src="https://www.echartsjs.com/examples/vendors/echarts/extension/bmap.js?_v_=1571170137685"></script> <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&amp;ak=KOmVjPVUAey1G2E8zNhPiuQ6QiEmAwZu&amp;__ec_v__=20190126"></script> <script type="text/javascript" src="https://api.map.baidu.com/getscript?v=2.0&amp;ak=KOmVjPVUAey1G2E8zNhPiuQ6QiEmAwZu&amp;services=&amp;t=20190622163250"></script> <script type="text/javascript">document.getElementById('nav-examples').className = 'active';</script> <!-- Baidu Tongji--> <script type="text/javascript">var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <!-- Google Analytics--> <script type="text/javascript" async="" src="https://www.googletagmanager.com/gtag/js?id=UA-141228404-1"></script> <script type="text/javascript">window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-141228404-1'); </script> ```

vue中echarts图无法渲染

我在父组件中定义了一个容器,然后定义了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无法成功渲染 ![图片说明](https://img-ask.csdn.net/upload/202001/07/1578384445_959195.png) ![图片说明](https://img-ask.csdn.net/upload/202001/07/1578384684_683561.png) ![图片说明](https://img-ask.csdn.net/upload/202001/07/1578384616_880352.png) ![图片说明](https://img-ask.csdn.net/upload/202001/07/1578384792_786796.png) 经过多次尝试,我遇到了一个奇怪的问题 ![图片说明](https://img-ask.csdn.net/upload/202001/07/1578385072_241075.png) ![图片说明](https://img-ask.csdn.net/upload/202001/07/1578385147_470918.png) 求各位大佬指点,我的代码哪个地方写错了,如何才能成功渲染echarts

echarts 显示数据出现问题,json取出数据后无法显示

如图,想显示的数据如图: ![图片说明](https://img-ask.csdn.net/upload/201808/07/1533622394_667478.png) 这数据是直接写死的,代码如下: ``` <body> <div id="line" style="width:600px; height: 400px;float:right"></div> </body> <script type="text/javascript"> $(function() { loaderBar(); }); function loaderBar() { var myChart = echarts.init(document.getElementById('line')); var dataAll = [ 389, 259, 262, 324, 232, 176, 196, 214, 133, 370 ]; var yAxisData = [ '原因1', '原因2', '原因3', '原因4', '原因5', '原因6', '原因7', '原因8', '原因9', '原因10' ]; var option = { backgroundColor : '#0f375f', title : [ { text : "投诉原因TOP10", x : '10%', y : '1%', textStyle : { color : "#fff", fontSize : "14" } }, ], grid : [ { x : '20%', y : '7%', width : '45%', height : '90%' }, ], tooltip : { formatter : '{b} ({c})' }, xAxis : [ { gridIndex : 0, axisTick : { show : false }, axisLabel : { show : false }, splitLine : { show : false }, axisLine : { show : false } }, ], yAxis : [ { gridIndex : 0, interval : 0, data : yAxisData.reverse(), axisTick : { show : false }, axisLabel : { show : true }, splitLine : { show : false }, axisLine : { show : false, lineStyle : { color : "white" } }, } ], series : [ { name : '投诉原因TOP10', type : 'bar', xAxisIndex : 0, yAxisIndex : 0, barWidth : '45%', itemStyle : { normal : { color : 'blue' } }, label : { normal : { show : true, position : "right", textStyle : { color : "white" } } }, data : dataAll.sort(), }, ] }; myChart.setOption(option); </script> ``` 但是我把它动态用ajax调用的时候,就无法显示数据了,代码如下: ``` <body> <div id="line" style="width:600px; height: 400px;float:right"></div> </body> <script type="text/javascript"> $(function() { loaderBar(); }); function loaderBar() { var myChart = echarts.init(document.getElementById('line')); var dataAll = [/* 389, 259, 262, 324, 232, 176, 196, 214, 133, 370 */]; var yAxisData = [/* '原因1', '原因2', '原因3', '原因4', '原因5', '原因6', '原因7', '原因8', '原因9', '原因10' */]; var option = { backgroundColor : '#0f375f', title : [ { text : "投诉原因TOP10", x : '10%', y : '1%', textStyle : { color : "#fff", fontSize : "14" } }, ], grid : [ { x : '20%', y : '7%', width : '45%', height : '90%' }, ], tooltip : { formatter : '{b} ({c})' }, xAxis : [ { gridIndex : 0, axisTick : { show : false }, axisLabel : { show : false }, splitLine : { show : false }, axisLine : { show : false } }, ], yAxis : [ { gridIndex : 0, interval : 0, /* data : yAxisData.reverse(), */ axisTick : { show : false }, axisLabel : { show : true }, splitLine : { show : false }, axisLine : { show : false, lineStyle : { color : "white" } }, } ], series : [ { name : '投诉原因TOP10', type : 'bar', xAxisIndex : 0, yAxisIndex : 0, barWidth : '45%', itemStyle : { normal : { color : 'blue' } }, label : { normal : { show : true, position : "right", textStyle : { color : "white" } } }, /* data : dataAll.sort(), */ }, ] }; /* myChart.setOption(option); */ var dataAll = [389, 259, 262, 324, 232, 176, 196, 214, 133, 370]; var yAxisData = ['原因1', '原因2', '原因3', '原因4', '原因5', '原因6', '原因7', '原因8', '原因9', '原因10']; $.ajax({ type : 'get', url : 'json/indexdata.json',//请求数据的地址 dataType : "json", //返回数据形式为json success : function(result) { //请求成功时执行该函数内容,result即为服务器返回的json对象 $.each(result.rankList, function(index, item) { yAxisData.push(item.name); //挨个取出类别并填入类别数组 dataAll.push(item.count); //挨个取出销量并填入销量数组 }); myChart.hideLoading(); /* alert(yAxisData); alert(dataAll); return ; */ option.yAxis.data=yAxisData; option.series.data=dataAll; myChart.setOption(option); } }); } </script> ``` 数据是能够拿到,但是现在图表无法显示出来。 ![图片说明](https://img-ask.csdn.net/upload/201808/07/1533622807_178708.png) 哪位大佬帮忙看看,感谢呀,江湖救急!

echarts怎么调用excel数据

![图片说明](https://img-ask.csdn.net/upload/201908/16/1565925862_978421.png) 需要做个图表,本地运行就可以了,需要的从excel中读取数据(excel中有两个数据源,一个是日期时间线索的数据,另一个是日期时间消费点击数据,两个数据源相同的有日期、月份、周数、周别), 怎么根据周数和月份来展示图表。 因为现在做的excel数据太多了,所以excel经常卡住,所以需要一个本地运行的图表

#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)

关于echarts图片导出Excel,图片失真

大致实现思路是,把ecahrts图片的base64编码传到后台,再用HSSFWorkbook的HSSFPatriarch画布写出图片,但是最后导出的图片是花的,完全失真。 代码中也加上了关闭动画 animation:false。求解答 页面中的echarts图片 ![图片说明](https://img-ask.csdn.net/upload/201910/14/1571044703_625678.png) Excel中的图片 ![图片说明](https://img-ask.csdn.net/upload/201910/14/1571044813_971416.png) 发现了问题是,获取的ecahrts的base64编码有问题。 如果当前页面显示的是echarts图片,获取的编码没问题,导出也是没问题的,图片正常 但是当前页面不是echarts图片,调同一个js方法,生成base64图片,这时获取的编码就有问题了,导出的图片也失真了。 所以请教大佬们,上述两种情况,调用同一个获取base64编码的方法,得到的不同的结果, 我怎么能在页面不显示echarts图片时,获取到正确的编码呢,跪求 问题解决了,就是在其他页面(无echarts的页面)中,先把这个echarts图片画出来,再给隐藏掉。

为什么页面访问后台存在跨域导致无法访问的问题,而后台之间调用接口却不存在跨域导致接口无法调用?

1、从127.0.0.1:8080/index.html请求后台127.0.0.1:8081/function/getdata会出现跨域问题 2、后台从127.0.0.1:8080调用127.0.0.2:8081的接口却能调通 请求方式有啥区别?

Android Studio 开发问题 为什么无法调用函数

![图片说明](https://img-ask.csdn.net/upload/201608/10/1470800465_368925.png) ![图片说明](https://img-ask.csdn.net/upload/201608/10/1470800477_148945.png) 为什么这里没有调用到getNewsInfo()函数,是什么原因啊......

关于echarts水球图插件加载不正确的问题

js文件的路径都配置正确了,但是页面就是不显示图表,而且控制台显示![图片说明](https://img-ask.csdn.net/upload/201703/26/1490539192_191305.jpg),求大神来解答

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

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

jquery 加载echart3 数据报错

Uncaught TypeError: Cannot read property 'dim' of undefined at n.getOtherAxis (http://localhost:8080/btmp/media/js/echarts.min.js:25:30202) at f (http://localhost:8080/btmp/media/js/echarts.min.js:14:24329) at Object.d [as dataTransform] (http://localhost:8080/btmp/media/js/echarts.min.js:14:23733) at f (http://localhost:8080/btmp/media/js/echarts.min.js:29:15905) at http://localhost:8080/btmp/media/js/echarts.min.js:1:2956 at Array.map (native) at Object.p [as map] (http://localhost:8080/btmp/media/js/echarts.min.js:1:2314) at s (http://localhost:8080/btmp/media/js/echarts.min.js:29:14921) at i.renderSeries (http://localhost:8080/btmp/media/js/echarts.min.js:29:16713) at i.<anonymous> (http://localhost:8080/btmp/media/js/echarts.min.js:14:22974)

asp.net使用echarts连接sql数据库并在页面显示

假设有个商品表,包含商品编号(主键),商品名和销量。最好是在下面的例子上改,求源码啊 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.min.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="width: 600px;height:400px;"></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); </script> </body> </html>

使用requirejs封装echarts

我想用reqirejs的方式,定义一个define,使用AMD的方式依赖于jquery和echarts,使用javascript函数返回一个方法,当其他地方调用时,可以直接调用这个返回的方法生成一个echarts图表。有没有人有实际的例子给参考下?

echarts.js制作日本地图

echarts.js 怎么制作日本地图 效果跟这张图差不多 只是我要的是日本的地图 不是我们中国的地图![图片说明](https://img-ask.csdn.net/upload/201911/14/1573717225_700217.png)

JAVA 所有类都是Object的子类 ,那么子类的对象为什么不能直接调用Clone()方法

虽然是Clone()在Object里面是protected权限,即使Person类是和Object不同包,但是protected定义的不同包的子类也可以继承父类的方法啊? class Person implements Cloneable { private String name ; private int age ; public Person(String name,int age){ this.name = name ; this.age = age ; } public String toString(){ return "姓名:"+this.name+",年龄:"+this.age ; } public Object clone() throws CloneNotSupportedException{ return super.clone() ; } } public class TestDemo { public static void main(String args[]) throws Exception { Person p1 = new Person("张三",30) ; Person p2 = (Person)p1.clone() ; p2.name = "李四" ; System.out.println(p1) ; System.out.println(p2) ; } }

Echarts 折线图如何和后台连接

使用Echarts控件在页面绘制了如下折线图![图片说明](https://img-ask.csdn.net/upload/201601/08/1452218289_76077.png) 图片里的数据是我手动设置的固定值,现在我需要从数据库中查询数据分别填在该控件的代码中,我们规定返回到页面的是json格式,现在不知道怎么查了 因为首先有四条折线,分别对应了不同的门,而横轴的时间段应该是固定的从0到23点,但如何和我从数据库查的对应时间下的访客次数相对应呢,我现在真是无从下手,描述的也含糊不清,附上我的需求和控件代码,望大神指教!尴尬的是新手没c币 需求是:增加通行记录统计画面,以折线图的方式显示按日统计通行记录数,横轴单位为小时,竖轴为通行记录数 折线图的关键代码: var option = { title : { text: '访客记录' }, tooltip: { show: true }, legend: { data:['东门','南门','西门','北门'] }, xAxis : [ { type : 'category', boundaryGap : false, data : ["00:00","04:00","08:00","12:00","16:00","20:00","00:00"] } ], yAxis : [ { type : 'value', axisLabel : { formatter: '{value} 次' } } ], series : [ { name:'东门', type:'line', data:[2, 11, 25, 43, 12, 32] }, { "name":"南门", "type":"line", "data":[5, 20, 40, 10, 10, 20] }, { "name":"西门", "type":"line", "data":[5, 40, 20, 30, 15, 5] }, { "name":"北门", "type":"line", "data":[20, 20, 25, 10, 15, 20] } ] }; ``` ```

error C2352: “CWnd::UpdateData”: 非静态成员函数的非法调用

CString getinfo_un() { CString un,str; CWnd::UpdateData(TRUE); str=CString( un.GetBuffer() ); str = un; } error C2352: “CWnd::UpdateData”: 非静态成员函数的非法调用 参见“CWnd::UpdateData”的声明 怎么办,找遍google,baidu,尚无结果

初级玩转Linux+Ubuntu(嵌入式开发基础课程)

课程主要面向嵌入式Linux初学者、工程师、学生 主要从一下几方面进行讲解: 1.linux学习路线、基本命令、高级命令 2.shell、vi及vim入门讲解 3.软件安装下载、NFS、Samba、FTP等服务器配置及使用

我以为我对Mysql事务很熟,直到我遇到了阿里面试官

太惨了,面试又被吊打

Python代码实现飞机大战

文章目录经典飞机大战一.游戏设定二.我方飞机三.敌方飞机四.发射子弹五.发放补给包六.主模块 经典飞机大战 源代码以及素材资料(图片,音频)可从下面的github中下载: 飞机大战源代码以及素材资料github项目地址链接 ————————————————————————————————————————————————————————— 不知道大家有没有打过飞机,喜不喜欢打飞机。当我第一次接触这个东西的时候,我的内心是被震撼到的。第一次接触打飞机的时候作者本人是身心愉悦的,因为周边的朋友都在打飞机, 每

Python数据分析与挖掘

92讲视频课+16大项目实战+源码+¥800元课程礼包+讲师社群1V1答疑+社群闭门分享会=99元 &nbsp; 为什么学习数据分析? &nbsp; &nbsp; &nbsp; 人工智能、大数据时代有什么技能是可以运用在各种行业的?数据分析就是。 &nbsp; &nbsp; &nbsp; 从海量数据中获得别人看不见的信息,创业者可以通过数据分析来优化产品,营销人员可以通过数据分析改进营销策略,产品经理可以通过数据分析洞察用户习惯,金融从业者可以通过数据分析规避投资风险,程序员可以通过数据分析进一步挖掘出数据价值,它和编程一样,本质上也是一个工具,通过数据来对现实事物进行分析和识别的能力。不管你从事什么行业,掌握了数据分析能力,往往在其岗位上更有竞争力。 &nbsp;&nbsp; 本课程共包含五大模块: 一、先导篇: 通过分析数据分析师的一天,让学员了解全面了解成为一个数据分析师的所有必修功法,对数据分析师不在迷惑。 &nbsp; 二、基础篇: 围绕Python基础语法介绍、数据预处理、数据可视化以及数据分析与挖掘......这些核心技能模块展开,帮助你快速而全面的掌握和了解成为一个数据分析师的所有必修功法。 &nbsp; 三、数据采集篇: 通过网络爬虫实战解决数据分析的必经之路:数据从何来的问题,讲解常见的爬虫套路并利用三大实战帮助学员扎实数据采集能力,避免没有数据可分析的尴尬。 &nbsp; 四、分析工具篇: 讲解数据分析避不开的科学计算库Numpy、数据分析工具Pandas及常见可视化工具Matplotlib。 &nbsp; 五、算法篇: 算法是数据分析的精华,课程精选10大算法,包括分类、聚类、预测3大类型,每个算法都从原理和案例两个角度学习,让你不仅能用起来,了解原理,还能知道为什么这么做。

如何在虚拟机VM上使用串口

在系统内核开发中,经常会用到串口调试,利用VMware的Virtual Machine更是为调试系统内核如虎添翼。那么怎么搭建串口调试环境呢?因为最近工作涉及到这方面,利用强大的google搜索和自己

程序员的兼职技能课

获取讲师答疑方式: 在付费视频第一节(触摸命令_ALL)片头有二维码及加群流程介绍 限时福利 原价99元,今日仅需39元!购课添加小助手(微信号:csdn590)按提示还可领取价值800元的编程大礼包! 讲师介绍: 苏奕嘉&nbsp;前阿里UC项目工程师 脚本开发平台官方认证满级(六级)开发者。 我将如何教会你通过【定制脚本】赚到你人生的第一桶金? 零基础程序定制脚本开发课程,是完全针对零脚本开发经验的小白而设计,课程内容共分为3大阶段: ①前期将带你掌握Q开发语言和界面交互开发能力; ②中期通过实战来制作有具体需求的定制脚本; ③后期将解锁脚本的更高阶玩法,打通任督二脉; ④应用定制脚本合法赚取额外收入的完整经验分享,带你通过程序定制脚本开发这项副业,赚取到你的第一桶金!

MFC一站式终极全套课程包

该套餐共包含从C小白到C++到MFC的全部课程,整套学下来绝对成为一名C++大牛!!!

C++语言基础视频教程

C++语言基础视频培训课程:本课与主讲者在大学开出的程序设计课程直接对接,准确把握知识点,注重教学视频与实践体系的结合,帮助初学者有效学习。本教程详细介绍C++语言中的封装、数据隐藏、继承、多态的实现等入门知识;主要包括类的声明、对象定义、构造函数和析构函数、运算符重载、继承和派生、多态性实现等。 课程需要有C语言程序设计的基础(可以利用本人开出的《C语言与程序设计》系列课学习)。学习者能够通过实践的方式,学会利用C++语言解决问题,具备进一步学习利用C++开发应用程序的基础。

北京师范大学信息科学与技术学院笔试10复试真题

北京师范大学信息科学与技术学院笔试,可以更好的让你了解北师大该学院的复试内容,获得更好的成绩。

深度学习原理+项目实战+算法详解+主流框架(套餐)

深度学习系列课程从深度学习基础知识点开始讲解一步步进入神经网络的世界再到卷积和递归神经网络,详解各大经典网络架构。实战部分选择当下最火爆深度学习框架PyTorch与Tensorflow/Keras,全程实战演示框架核心使用与建模方法。项目实战部分选择计算机视觉与自然语言处理领域经典项目,从零开始详解算法原理,debug模式逐行代码解读。适合准备就业和转行的同学们加入学习! 建议按照下列课程顺序来进行学习 (1)掌握深度学习必备经典网络架构 (2)深度框架实战方法 (3)计算机视觉与自然语言处理项目实战。(按照课程排列顺序即可)

网络工程师小白入门--【思科CCNA、华为HCNA等网络工程师认证】

本课程适合CCNA或HCNA网络小白同志,高手请绕道,可以直接学习进价课程。通过本预科课程的学习,为学习网络工程师、思科CCNA、华为HCNA这些认证打下坚实的基础! 重要!思科认证2020年2月24日起,已启用新版认证和考试,包括题库都会更新,由于疫情原因,请关注官网和本地考点信息。题库网络上很容易下载到。

Python界面版学生管理系统

前不久上传了一个控制台版本的学生管理系统,这个是Python界面版学生管理系统,这个是使用pycharm开发的一个有界面的学生管理系统,基本的增删改查,里面又演示视频和完整代码,有需要的伙伴可以自行下

软件测试2小时入门

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

Tomcat服务器下载、安装、配置环境变量教程(超详细)

未经我的允许,请不要转载我的文章,在此郑重声明!!! 请先配置安装好Java的环境,若没有安装,请参照我博客上的步骤进行安装! 安装Java环境教程https://blog.csdn.net/qq_40881680/article/details/83585542 Tomcat部署Web项目(一)·内嵌https://blog.csdn.net/qq_40881680/article/d...

2019数学建模A题高压油管的压力控制 省一论文即代码

2019数学建模A题高压油管的压力控制省一完整论文即详细C++和Matlab代码,希望对同学们有所帮助

图书管理系统(Java + Mysql)我的第一个完全自己做的实训项目

图书管理系统 Java + MySQL 完整实训代码,MVC三层架构组织,包含所有用到的图片资源以及数据库文件,大三上学期实训,注释很详细,按照阿里巴巴Java编程规范编写

linux下利用/proc进行进程树的打印

在linux下利用c语言实现的进程树的打印,主要通过/proc下的目录中的进程文件,获取status中的进程信息内容,然后利用递归实现进程树的打印

微信小程序开发实战之番茄时钟开发

微信小程序番茄时钟视频教程,本课程将带着各位学员开发一个小程序初级实战类项目,针对只看过官方文档而又无从下手的开发者来说,可以作为一个较好的练手项目,对于有小程序开发经验的开发者而言,可以更好加深对小程序各类组件和API 的理解,为更深层次高难度的项目做铺垫。

[已解决]踩过的坑之mysql连接报“Communications link failure”错误

目录 前言 第一种方法: 第二种方法 第三种方法(适用于项目和数据库在同一台服务器) 第四种方法 第五种方法(项目和数据库不在同一台服务器) 总结 前言 先给大家简述一下我的坑吧,(我用的是mysql,至于oracle有没有这样的问题,有心的小伙伴们可以测试一下哈), 在自己做个javaweb测试项目的时候,因为买的是云服务器,所以数据库连接的是用ip地址,用IDE开发好...

人工智能-计算机视觉实战之路(必备算法+深度学习+项目实战)

系列课程主要分为3大阶段:(1)首先掌握计算机视觉必备算法原理,结合Opencv进行学习与练手,通过实际视项目进行案例应用展示。(2)进军当下最火的深度学习进行视觉任务实战,掌握深度学习中必备算法原理与网络模型架构。(3)结合经典深度学习框架与实战项目进行实战,基于真实数据集展开业务分析与建模实战。整体风格通俗易懂,项目驱动学习与就业面试。 建议同学们按照下列顺序来进行学习:1.Python入门视频课程 2.Opencv计算机视觉实战(Python版) 3.深度学习框架-PyTorch实战/人工智能框架实战精讲:Keras项目 4.Python-深度学习-物体检测实战 5.后续实战课程按照自己喜好选择就可以

2019 AI开发者大会

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

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

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

Python数据分析师-实战系列

系列课程主要包括Python数据分析必备工具包,数据分析案例实战,核心算法实战与企业级数据分析与建模解决方案实战,建议大家按照系列课程阶段顺序进行学习。所有数据集均为企业收集的真实数据集,整体风格以实战为导向,通俗讲解Python数据分析核心技巧与实战解决方案。

YOLOv3目标检测实战系列课程

《YOLOv3目标检测实战系列课程》旨在帮助大家掌握YOLOv3目标检测的训练、原理、源码与网络模型改进方法。 本课程的YOLOv3使用原作darknet(c语言编写),在Ubuntu系统上做项目演示。 本系列课程包括三门课: (1)《YOLOv3目标检测实战:训练自己的数据集》 包括:安装darknet、给自己的数据集打标签、整理自己的数据集、修改配置文件、训练自己的数据集、测试训练出的网络模型、性能统计(mAP计算和画出PR曲线)和先验框聚类。 (2)《YOLOv3目标检测:原理与源码解析》讲解YOLOv1、YOLOv2、YOLOv3的原理、程序流程并解析各层的源码。 (3)《YOLOv3目标检测:网络模型改进方法》讲解YOLOv3的改进方法,包括改进1:不显示指定类别目标的方法 (增加功能) ;改进2:合并BN层到卷积层 (加快推理速度) ; 改进3:使用GIoU指标和损失函数 (提高检测精度) ;改进4:tiny YOLOv3 (简化网络模型)并介绍 AlexeyAB/darknet项目。

2021考研数学张宇基础30讲.pdf

张宇:博士,全国著名考研数学辅导专家,教育部“国家精品课程建设骨干教师”,全国畅销书《张宇高等数学18讲》《张宇线性代数9讲》《张宇概率论与数理统计9讲》《张宇考研数学题源探析经典1000题》《张宇考

三个项目玩转深度学习(附1G源码)

从事大数据与人工智能开发与实践约十年,钱老师亲自见证了大数据行业的发展与人工智能的从冷到热。事实证明,计算机技术的发展,算力突破,海量数据,机器人技术等,开启了第四次工业革命的序章。深度学习图像分类一直是人工智能的经典任务,是智慧零售、安防、无人驾驶等机器视觉应用领域的核心技术之一,掌握图像分类技术是机器视觉学习的重中之重。针对现有线上学习的特点与实际需求,我们开发了人工智能案例实战系列课程。打造:以项目案例实践为驱动的课程学习方式,覆盖了智能零售,智慧交通等常见领域,通过基础学习、项目案例实践、社群答疑,三维立体的方式,打造最好的学习效果。

DirectX修复工具V4.0增强版

DirectX修复工具(DirectX Repair)是一款系统级工具软件,简便易用。本程序为绿色版,无需安装,可直接运行。 本程序的主要功能是检测当前系统的DirectX状态,如果发现异常则进行修复

期末考试评分标准的数学模型

大学期末考试与高中的考试存在很大的不同之处,大学的期末考试成绩是主要分为两个部分:平时成绩和期末考试成绩。平时成绩和期末考试成绩总分一般为一百分,然而平时成绩与期末考试成绩所占的比例不同会导致出现不同

Vue.js 2.0之全家桶系列视频课程

基于新的Vue.js 2.3版本, 目前新全的Vue.js教学视频,让你少走弯路,直达技术前沿! 1. 包含Vue.js全家桶(vue.js、vue-router、axios、vuex、vue-cli、webpack、ElementUI等) 2. 采用笔记+代码案例的形式讲解,通俗易懂

c语言项目开发实例

十个c语言案例 (1)贪吃蛇 (2)五子棋游戏 (3)电话薄管理系统 (4)计算器 (5)万年历 (6)电子表 (7)客户端和服务器通信 (8)潜艇大战游戏 (9)鼠标器程序 (10)手机通讯录系统

相关热词 c#框体中的退出函数 c# 按钮透明背景 c# idl 混编出错 c#在位置0处没有任何行 c# 循环给数组插入数据 c# 多线程死锁的例子 c# 钉钉读取员工排班 c# label 不显示 c#裁剪影像 c#工作进程更新ui
立即提问