echart渲染

  var chartDom = document.getElementById('echarts' + obj.id);
  var myChart = echarts.init(chartDom);
  //type为1初始化图表
  if(obj.type == 1){
      var option = {
          tooltip: {
              trigger: 'axis'
          },
          grid: {
              top: 40,
              right: 60,
              left: 60,
              bottom: 40,
              containLabel: true,
          },
          xAxis: {
              type: 'category',
              boundaryGap: false,
              data: res.data[0].times,

          },
          yAxis: {
              name: obj.name,
              min: 'dataMin',
              max: 'dataMax',
              type: 'value'
          },
          series: [{
              type: 'line',
              itemStyle: {
                  color: '#46E3D0'
              },
              data: res.data[0].values,

          }]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
  //更新图表
  }else if(obj.type == 2){
  	  //不建议用，但是这个项目用下面的有报错，故用这个
      var realChart = myChart.getOption();
      realChart.xAxis[0].data = res.data[0].times,
      realChart.series[0].data = res.data[0].values,
      myChart.setOption(realChart,true);

      // myChart.setOption({
      //     xAxis: {
      //         data: res.data[0].times,
      //     },
      //     series: [{
      //         data: res.data[0].values,
      //     }]
      // },true );
  }

环形图，内部自定义文字，百分比，图标等

过程中，出现一个bug 自定义环形图颜色一直无效，后来发现，把下面代码注释就正常了

 option = {

	// visualMap: {///视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素。视觉元素可以是：symbol: 图元的图形类别。symbolSize: 图元的大小。color: 图元的颜色
	// show: true,//是否显示 visualMap-continuous 组件。如果设置为 false，不会显示，但是数据映射的功能还存在
	//}
},

流程：

monthData()
var monthChart;

function monthData() {
   var chartDom = document.getElementById('monthEchart');
   monthChart && monthChart.dispose();
   monthChart = echarts.init(chartDom, 'walden');
   var option;
   var value = '50%';
   option = {
       graphic: [
           {
               type: 'image',// 类型，可以是文字、图片或其它类型
               id: 'text0',
               left: 'center',
               top: '17%',
               style: {
                   image:'/images/index/decrease.png',
                   width: 18,
                   height: 18,
                   color: '#1fb26c'
               }
           },
           {
               type: 'text',// 类型，可以是文字、图片或其它类型
               id: 'text1',
               left: 'center',
               top: '41%',
               style: {
                   text: '50%',
                   fill: '#333333', // 文字的颜色
                   fontSize: 22
               }
           },
           {
               type: 'text',
               id: 'text2',
               left: 'center',
               top: '65%',
               style: {
                   text: '环比',
                   fill: '#999999',
                   fontSize: 16
               }
           }
       ],
       // color:['#e9e9e9','#1fb26c'],//(三种方法)  环形图自定义颜色，和下面的series中的color，及data中itemStyle的color    哪一个设置都可以
       series: [
           {
               type: 'pie',
               radius: ['69%', '79%'],
               center: ['50%', '50%'],
               // color: ['#e9e9e9', '#1fb26c'],
               data: [
                   //itemSyle是单项的背景颜色设置。
                   {value: 10, itemStyle: {color: '#e9e9e9'}},
                   {value: 90, itemStyle: {color: '#1fb26c'}},
               ],
               label: {
                   //将视觉引导图关闭
                   show:false,
               },

               // textStyle: {},
               itemStyle: {
                   //设置的是每项之间的留白
                   borderWidth: 0,
                   borderColor: '#fff'
               },
               // 初始化echarts的动画效果
               animationType: 'scale',
               animationEasing: 'elasticOut',
               animationDelay: function (idx) {
                   return Math.random() * 200;
               },
               // 高亮样式。
               // emphasis: {
               //     itemStyle: {
               //         // 高亮时点的颜色
               //         color: '#e9e9e9'
               //     },
               //     label: {
               //         show: true,
               //         // 高亮时标签的文字
               //         formatter: '高亮时显示的标签内容'
               //     }
               // },
           }
       ]
   }
   option && monthChart.setOption(option);
}
}