使用eacharts做大屏，需要使用后端数据，下面的方法是自己试过有效的，有什么不对的，望各位大佬指点。

目录

方法一：在mounted中使用定时器调用eacharts方法（定时器可以获取到data中的数据）

方法二：在调用数据的时候调用图表（一个页面的所有数据都在这一个接口中）

方法三：使用chartes中的dataset数据集

方法四：在对应图表中，用ajax请求

方法一：在mounted中使用定时器调用eacharts方法（定时器可以获取到data中的数据）

mounted () {setTimeout(() => {this.axisOption() // 树状this.pieOption()//饼图}, 2000)},
//或者
mounted () {setTimeout(async () => {const res = await Getwx()this.Monthlist = res.Data.Monthlistthis.Visitpvlist = res.Data.Visitpvlistthis.drawLine();//柱状图
}, 0);
},

方法二：在调用数据的时候调用图表（一个页面的所有数据都在这一个接口中）

created () {this.GetProjectAll (）},methods: {
// 获取数据async GetProjectAll () {const res = await GetProjectAll({ projectid: this.formdata.type })this.tableData = res.data.jrgrsl.datathis.pieData = res.data.clbp.datathis.$nextTick(() => {this.axisOption() // 树状this.pieOption()//饼图})},}

方法三：使用chartes中的dataset数据集

<script>
import * as echarts from 'echarts'
import { getStatistics } from '@/api/home'
export default {data () {return {mainData: [],//折线图数据}},mounted () {this.chartSetting();},created () {this.CeData()},methods: {// 返回数据async CeData () {const { data } = await getStatistics()this.mainData = data.mainData},// 折现图chartSetting () {// 基于准备好的dom，初始化echarts实例this.mainChart = echarts.init(document.getElementById('main'))const option = {tooltip: {trigger: 'axis',axisPointer: {type: 'cross',label: {backgroundColor: '#6a7985'}}},dataset: [ // 数据{  source: this.mainData // 表数据 },{ transform: {type: 'sort'}}],xAxis: [{type: 'category',boundaryGap: false,axisLabel: { // 底部文字设置interval: 0, // 控制是否全部显示fontSize: 12},axisLine: { // 底部横线show: false},axisTick: { // 刻度线show: false}}],yAxis: [{ type: 'value' }],series: [{name: '项目',type: 'line',stack: 'Total',smooth: true,lineStyle: {  width: 1,   color: '#2e3192' },showSymbol: false,label: {  show: true,  position: 'top' },areaStyle: {opacity: 0.8,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{  offset: 0,  color: '#62a0f8' },{  offset: 1, color: '#b5d5ff' }])},markPoint: { // 最大值和最小值标注data: [{ type: 'max', name: '最大值' }]},emphasis: {  focus: 'series' }}]}// 绘制图表this.mainChart.setOption(option)const that = thiswindow.addEventListener('resize', function () {that.mainChart.resize()})},}
}
</script>

方法四：在对应图表中，用ajax请求

 drawLine2 () {var chartDom = document.getElementById('main2');var myChart = echarts.init(chartDom);var option;option = {tooltip: {trigger: 'axis',axisPointer: {type: 'cross',crossStyle: {color: '#999'}}},grid: {left: "11%",width: "80%",height: "60%"},legend: [{data: ['单位: 秒'],top: "10",left: "10",itemWidth: 8,itemHeight: 8,icon: "rect",textStyle: {color: "#fff"}}, {data: ['增速%'],top: "10",right: "5%",itemWidth: 8,itemHeight: 8,icon: "rect",textStyle: {color: "#fff"}}],xAxis: [{type: 'category',data: [],axisPointer: {type: 'shadow'},axisTick: {show: false},axisLabel: {interval: 0,textStyle: {color: '#b8b8ba',},}}],yAxis: [{type: 'value',min: 0,max: 10000,interval: 2000,axisLabel: {formatter: function (value) {return value + ""},textStyle: {color: '#b8b8ba',},},axisLine: {show: true},axisTick: {show: false},splitLine: {show: true,lineStyle: {width: 0.5}},symbol: "triangle"},{type: 'value',min: 0.4,max: 0.9,interval: 0.1,axisLabel: {formatter: '{value}',textStyle: {color: '#b8b8ba',},},splitLine: {show: true,lineStyle: {width: 0.5}},}],series: [{name: '单位: 秒',type: 'bar',data: [],itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#01c7f4' },{ offset: 1, color: '#003fe2' }]),borderRadius: 8},barWidth: 10},{name: '增速%',type: 'line',areaStyle: {},yAxisIndex: 1,data: [],itemStyle: {color: "#77ff3b",},lineStyle: {width: 1},symbolSize: 7,areaStyle: {opacity: 0.4,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 1, color: '#040d0c' },{ offset: 0, color: '#5cd62c' }])},}]};const zoomSize = 6;myChart.on('click', function (params) {console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);myChart.dispatchAction({type: 'dataZoom',startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],endValue:dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]});});option && myChart.setOption(option);$.ajax({type: "get",// async: false, //同步执行url: "api/WxStatistics/GetStatisticsData",data: {},success: function (result) {myChart.setOption({xAxis: { data: result.Data.Monthlist },series: [{data: result.Data.Staytimeuvlist,},{data: [0.6, 0.65, 0.65, 0.68, 0.58, 0.61, 0.58, 0.6, 0.61, 0.65, 0.63, 0.55],}]})},error: function (errorMsg) {alert("不好意思，图表请求数据失败啦!");myChart.hideLoading();}})window.addEventListener("resize", function () {myChart.resize();});},

注意
如果一个图表需要展示不同数据时，每获取一次数据，图表都会重新渲染一次（例如下拉框中选取数据后，图表切换对应数据）。
可能会出现There is a chart instance already initialized on the dom.这样的警告，意思是dom上已经初始化了一个图表实例。
解决办法：可以在每次渲染前先销毁这个实例，然后再重新渲染。

var myChart //先注册全局变量axisOption () {//在方法内判断，然后销毁实例，然后再初始化if (myChart != null && myChart != "" && myChart != undefined) {myChart.dispose();//销毁}// 基于准备好的dom，初始化echarts实例myChart = echarts.init(document.getElementById('axisMain'))const option = { }// 绘制图表myChart.setOption(option)window.addEventListener('resize', function () {myChart.resize()})},

 

 

到这里就结束啦，这篇文章看完如果您觉得有所收获，认为还行的话，就点个赞收藏一下