echarts的常规用法及注意事项

1、在线引用

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>

 2、使用

<div id="container"></div>

jQuery(document).ready(function ($) {
		 var jsonStr = [{
                capacity: "29",
                containTax: "0",
                createDate: "2019-06-25 18:20:59",
                financialexpenses: 0,
                laborcosts: 0,
                managementcosts: 0,
                manufacturingcosts: 0,
                model: "28",
                number: "30",
                price: 0,
                profitbonus: 0,
                proposeMoney: 0,
                salecosts: 0,
                sumMoney: 7676,
                totalCostMoney: 0,
                totalcost: 0,
            }, {
                capacity: "29",
                containTax: "0",
                createDate: "2019-06-26 18:20:59",
                financialexpenses: 0,
                laborcosts: 0,
                managementcosts: 0,
                manufacturingcosts: 0,
                model: "28",
                number: "30",
                price: 0,
                profitbonus: 0,
                proposeMoney: 0,
                salecosts: 0,
                sumMoney: 769,
                totalCostMoney: 0,
                totalcost: 0
            }, {
                capacity: "29",
                containTax: "0",
                createDate: "2019-06-27 18:20:59",
                financialexpenses: 0,
                laborcosts: 0,
                managementcosts: 0,
                manufacturingcosts: 0,
                model: "28",
                number: "30",
                price: 0,
                profitbonus: 0,
                proposeMoney: 0,
                salecosts: 0,
                sumMoney: 300,
                totalCostMoney: 0,
                totalcost: 0
            }, {
                capacity: "29",
                containTax: "0",
                createDate: "2019-06-28 18:20:59",
                financialexpenses: 0,
                laborcosts: 0,
                managementcosts: 0,
                manufacturingcosts: 0,
                model: "28",
                number: "30",
                price: 0,
                profitbonus: 0,
                proposeMoney: 0,
                salecosts: 0,
                sumMoney: 7670,
                totalCostMoney: 0,
                totalcost: 0
            }, {
                capacity: "29",
                containTax: "0",
                createDate: "2019-06-29 18:20:59",
                financialexpenses: 0,
                laborcosts: 0,
                managementcosts: 0,
                manufacturingcosts: 0,
                model: "28",
                number: "30",
                price: 0,
                profitbonus: 0,
                proposeMoney: 0,
                salecosts: 0,
                sumMoney: 766,
                totalCostMoney: 0,
                totalcost: 0
            }, {
                capacity: "29",
                containTax: "0",
                createDate: "2019-06-29 18:20:59",
                financialexpenses: 0,
                laborcosts: 0,
                managementcosts: 0,
                manufacturingcosts: 0,
                model: "28",
                number: "30",
                price: 0,
                profitbonus: 0,
                proposeMoney: 0,
                salecosts: 0,
                sumMoney: 766,
                totalCostMoney: 0,
                totalcost: 0
            }, {
                capacity: "29",
                containTax: "0",
                createDate: "2019-06-29 18:20:59",
                financialexpenses: 0,
                laborcosts: 0,
                managementcosts: 0,
                manufacturingcosts: 0,
                model: "28",
                number: "30",
                price: 0,
                profitbonus: 0,
                proposeMoney: 0,
                salecosts: 0,
                sumMoney: 766,
                totalCostMoney: 0,
                totalcost: 0
            }, {
                capacity: "29",
                containTax: "0",
                createDate: "2019-06-29 18:20:59",
                financialexpenses: 0,
                laborcosts: 0,
                managementcosts: 0,
                manufacturingcosts: 0,
                model: "28",
                number: "30",
                price: 0,
                profitbonus: 0,
                proposeMoney: 0,
                salecosts: 0,
                sumMoney: 766,
                totalCostMoney: 0,
                totalcost: 0
            }, {
                capacity: "29",
                containTax: "0",
                createDate: "2019-06-29 18:20:59",
                financialexpenses: 0,
                laborcosts: 0,
                managementcosts: 0,
                manufacturingcosts: 0,
                model: "28",
                number: "30",
                price: 0,
                profitbonus: 0,
                proposeMoney: 0,
                salecosts: 0,
                sumMoney: 766,
                totalCostMoney: 0,
                totalcost: 0
            }];
		
            getEcharts(jsonStr)
        }); 
function getEcharts(datas) { //datas是数组	
  $("#container").css("height", (window.screen.height-30)+"px")
  var labelsArrs = [];
  $.each(datas, function (index, el) {
      labelsArrs.push(el.createDate);
   });
  var orderNumberArrs = [];
  $.each(datas, function (index, el) {
     orderNumberArrs.push(el.sumMoney);
  });
 var dom = document.getElementById("container");
 var myChart = echarts.init(dom);
 var app = {};
 option = null;
 option = {
    yAxis: {
       type: 'category',
       data: labelsArrs,
	   inverse:true,
       nameRotate: 90, //坐标轴名字旋转，角度值。
       axisLabel: { //坐标轴刻度标签的相关设置。
         rotate: 270, //刻度标签旋转的角度，
         formatter: function (s) {
		   var months=s.split('-');
		   var days=(months[2].split(" "))[0];
		   var params=months[1]+"-"+days;
           var newParamsName = ""; // 最终拼接成的字符串
           var paramsNameNumber = params.length; // 实际标签的个数
           var provideNumber = 6; // 每行能显示的字的个数
           var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
            /** * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签*/
           // 条件等同于rowNumber>1
          if (paramsNameNumber > provideNumber) {
         /** 循环每一行,p表示行 */
         for (var p = 0; p < rowNumber; p++) {
            var tempStr = ""; // 表示每一次截取的字符串
            var start = p * provideNumber; // 开始截取的位置
            var end = start + provideNumber; // 结束截取的位置
            // 此处特殊处理最后一行的索引值
           if (p == rowNumber - 1) {
              // 最后一次不换行
              tempStr = params.substring(start, paramsNameNumber);
            } else {
               // 每一次拼接字符串并换行
              tempStr = params.substring(start, end) + "\n";
            }
               newParamsName += tempStr; // 最终拼成的字符串
            }

           } else {
               // 将旧标签的值赋给新标签
                 newParamsName = params;
            }
            //将最终的字符串返回
             return newParamsName
           }
          },
         },
       grid: {
          top: 100,
          left: 40, // 调整这个属性
          right: 40,
           bottom:30,
        },
        xAxis: {
			position:'top',
            type: 'value',
            axisLabel: { //坐标轴刻度标签的相关设置。
              rotate: 90 //刻度标签旋转的角度，
               },
          },
       tooltip: {
          trigger: 'item', //item axis
		  extraCssText:'transform:rotate(90deg);-ms-transform:rotate(90deg);-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);-o-transform:rotate(90deg);',
		  position:'top',
		  label: {
             backgroundColor: 'orange',
             borderColor: '#eee',
             borderWidth: 1,
             shadowBlur: 0,
             shadowOffsetX: 0,
             shadowOffsetY: 0,
             textStyle: {
                color: '#222'
               }
             },
          },
          series: [{
                    data: orderNumberArrs,
                    type: 'line',
                    smooth: true,
                    showSymbol: true,
                    symbol: 'emptyCircle', // circle  emptyCircle
                    symbolSize: 10, //设定实心点的大小
                    animation: true,
                    itemStyle: { //圆圈样式
                        borderWidth: 2,
                        color: '#7fb5e4',
                    },
                    lineStyle: { //线条样式
                        width: 2,
                        color: '#7fb5e4',
                    },
					 formatter: function (params) {
						    console.log(params)
                            return params.value + '元';
                        },
                    label: {
                        show: true,
                        position: 'top',
                       
                        textStyle: {
                            color: '#333',
                            fontSize: 20,
                            fontWeight: 400
                        }
                    }
                }]
            };
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
                window.onresize =myChart.resize()
            }

        }

3、注意事项： 

  extraCssText可以修改tooltip组件的样式；

  position修改tooltip组件的位置；

 tooltip: {
     trigger: 'item', //item axis
     extraCssText:'transform:rotate(90deg);-ms-transform:rotate(9deg);-moz-transform:rotate(9deg);-webkit-transform:rotate(9deg);-o-transform:rotate(9deg);', //设置旋转的样式
  },