echarts图形显示&echarts图形颜色不兼容所有浏览器问题

各位小伙伴大家好,今天和大家分享一下这两天正在研究的Echarts图形界面的显示:

  需求分析:将数据从数据库查出,经过mybatis,service,controller后导入到前台界面,利用js循环,将数据导入到数组中,在echarts中进行数据显示操作:

  一、在jsp界面中创建需要显示echarts的div(div的初始状态是hidden状态,触发点击事件后,进行显示并导入echarts图形):      

      <div id='main' class='one' hidden='hidden'></div>   

  二、给div添加CSS样式,控制期长宽大小:  

       .one{

         width:**%;

         height:**px;

        }

  三、将数据注入并显示echats界面(此处以金额为例):

    1、var  amoney=[ ]; var bmoney=[ ] ; var cmoney=[ ];  var daylist= [];

    2、从后台取得数据:list<Test> (Test含有amoney,bmoney,cmoney三个属性)—将数据进行循环注入到数组中:

      if(list){

      for(int i=0;i<list.length;i++){

        amoney.push(list.amoney);  //push 指的是将数据追加到数组的操作

        bmonye.push(list.bmoney);

        cmoney.push(list.cmonye);

        }

      }

    3、将echarts进行初始化,并将其注入到div中

      myEcharts=echarts.init(div);

      myEcharts.setOption({

        

    text: '金额'
},
tooltip: {
trigger: 'axis',
},
legend: {
data: ['a金额','b金额','c金额'],
bottom: 3
},
xAxis: [{
type: 'category',
data:daylist, //日期注入,定义xz轴
axisLabel: {
interval: 0
},
axisPointer: {
type: 'shadow'
}
}],

yAxis: [
{
type: 'value',
min: allCountMin,
max: allCountMax,
interval: allCountInterval,
boundaryGap: [0,0.1], //利用最大值最小值定义y轴
name: '元'/*,
,splitLine : {
show : false
},
scale : true
}
],
series:
[{
name: 'a金额',
type: 'line',
data: amoney,
itemStyle: {
normal: {
color: 'rgb(##,##,##)'          //a金额,颜色定义采用rgb形式,type类型是折线图
}
}
} {
name: 'b金额',
type: 'line',
data: cmoney,
itemStyle: {
normal: { //16进制定义的颜色不兼容所有浏览器,会出现某些浏览器无法正确显示颜色的问题,建议各位定义颜色是采取用rgb形式定义
color: '#0000'
}
}
}
}]

 

         })

    

 

 

 

 

 

 

 

 

   

posted @ 2021-06-20 17:22  cx330sky  阅读(28)  评论(0编辑  收藏  举报