推荐设备MORE

免费制作网页

免费制作网页

公司新闻

微信小程序怎么开发_解决echarts数据二次烘托不成

日期:2021-01-05
我要分享
解决echarts数据二次渲染不成功的问题       这篇文章主要介绍了解决echarts数据二次渲染不成功的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

最近在使用echarts做报表需求,二次生成报表时数据合并,无法正确显示。

第一次渲染:

第二次渲染:

可以看到这里的echarts项的series变为2个(如上图),但是渲染后的效果series项还是和第一次相同。

解决办法:

应该设置mychart.setoption({},true);

原因:

chart.setOption(option,notMerge,lazyUpdate);

option:图表的配置项和数据

notMerge:可选,是否不跟之前设置的option进行合并,默认为false,即合并。(这里是导致二次渲染不成功的根本)

lazyUpdate:可选,在设置完option后是否不立即更新图表,默认为false,即立即更新。

补充知识:请求到数据后echarts图表的重新渲染问题

我就废话不多说了,大家还是直接看代码吧~

 export default{
 data(){
 return{
 //定义接受数据的空数组
 e2data1:[],
 e2data2:[],
 mounted() {
 //加载图表
 this.drawLine();
 created(){
 // 并发发送多个请求
 axios.all([this.getTable1Data1()])
 .then(axios.spread(function (acct, perms) {
 console.log("所有数据请求成功");
 }));
 methods:{
 getTable1Data1(){
 let formData=new FormData;
 formData.append("companyName",this.chose);
 return axios.post('/StockFirstnfirstout/trendChart',formData)
 .then(response= {
 let list=response.data.trendChartOfMonth;
 //每次加载前清空接口数据
 this.e2data1=[];
 this.e2data2=[];
 list.forEach((value,i)= {
 this.e2data1.push(value.count);
 this.e2data2.push(value.saleMonth);
 //重新渲染图表
 myChart2.setOption({
 xAxis: {
 data:this.e2data2
 series: [
 {name:'柱状图',
 data: this.e2data1
 console.log(this.e2data1);
 console.log(this.e2data2);
 .catch(error= {
 console.log(error);
 // 基于准备好的dom,初始化echarts实例
 //注意出myChart2的作用域
 myChart2 = echarts.init(document.getElementById('zhLine'));
 myChart2.setOption({
 title: {text: '本月累计趋势图',
 textStyle:{
 color:'#000', //颜色
 fontStyle:'normal', //风格
 fontWeight:'normal', //粗细
 fontFamily:'Microsoft yahei', //字体
 fontSize:16, //大小
 align:'center', //水平对齐
 lineHeight:50
 // title位置
 padding:[20, 0, 20, 30]
 legend: {
 data:['环比',],
 //折点提示位置
 left:'90%',
 top:'5%'
 grid:{ //显示数据的图表位于当前canvas的坐标轴
 x:50,
 y:80,
 borderWidth:1,
 tooltip: {
 trigger: 'axis',
 backgroundColor : '#ccc',
 axisPointer: {
 type: 'cross',
 crossStyle: {
 color: '#999'
 xAxis : [
 { name:'日期',
 type : 'category',
 data : this.e2data2,
 axisLine: {
 lineStyle: {
 color: '#999'
 axisTick:{
 show:false

以上这篇解决echarts数据二次渲染不成功的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持凡科。