echarts随笔

　　写了一段时间的自定义报表，这几天终于接触到了echarts，用它来显示图形，刚开始做的时候都是直接copy的以前写过的图形的代码，以前没问题，这次终于出问题了，因为copy过来的，又不知道什么意思，报了个错，真的要崩溃，无从下手，只能把现在的代码和以前的代码做比较，说实话，这并不是一个好方法。折腾了几天，到今天，百度了一下echarts参数的意思，再比较终于发现了问题，

这是写的柱状图和折线图的代码：

var myChart = echarts.init(document.getElementById('main'));

myChart.setOption({
　　title: {
　　　　text: reportName, //正标题
　　　　link: "", //正标题链接 点击可在新窗口中打开
　　　　x: "center", //标题水平方向位置
　　　　//正标题样式
　　　　textStyle: {
　　　　　　　fontSize:bzwt
　　　　}
　　},
　　tooltip : {//鼠标悬浮交互时的信息提示
　　　   trigger: 'axis',
　　　　textStyle:{
　　　　　　fontSize:bzwti
　　　　}
　　},
　　legend: {//图例，每个图表最多仅有一个图例
　　　　data:[""]//很重要！data内的字符串数组需要与series数组内每一个series的name值相对应，
　　},
　　toolbox: {
　　　　show : true,
　　　　feature : {
　　　　　　mark : {show: false},
　　　　　　dataView : {show: false, readOnly: true},
　　　　　　magicType: {show: false, type: ['line', 'bar']},
　　　　　　restore : {show: false},
　　　　　　saveAsImage : {show: false}
　　　　}
　　},
　　//设置节点不能拖动
　　calculable : false,
　　grid :{
　　　　left:xd,
　　　　bottom:yd,
　　　　right:xc,
　　},
　　xAxis : [
　　{
　　　　type : 'category',
　　　　axisLabel: {
　　　　　　inside:false,
　　　　　　textStyle: {
　　　　　　　　fontSize:bzw
　　　　　　}
　　　　} , 
　　　　data:xArr 
　　}],
　　yAxis : [
　　　　{
　　　　　　type : 'value',

　　　　　　axisLabel: {
　　　　　　　　inside:false,
　　　　　　　　axisTick : {show: false},
　　　　　　　　textStyle: {
　　　　　　　　　　fontSize:bzw
　　　　　　　　}

　　　　　　},

　　　　}
　　]，
　　series : [
　　{
　　　　name:name1,
　　　　type:type,
　　　　stack: '费用', 
　　　　itemStyle: {
　　　　　　normal: {
　　　　　　　　color: 'blue',
　　　　　　}
　　　　},
　　　　data:oneArr
　　},
　　{
　　　　name:name2,
　　　　type:type,
　　　　stack: '费用', 
　　　　itemStyle: {
　　　　　　normal: {
　　　　　　　　color: 'gray',
　　　　　　}
　　　　},
　　　　data:twoArr
　　},
　　{
　　　　name:name3,
　　　　type:type, 
　　　　label:{
　　　　　　normal:
　　　　　　{
　　　　　　　　show:true,
　　　　　　　　textStyle:{
　　　　　　　　　　fontSize:bzwz
　　　　　　　　}
　　　　　　}
　　　　}, 
　　　　itemStyle: {
　　　　　　normal: {
　　　　　　　　color: 'red',
　　　　　　}
　　　　},
　　　　data:threeArr
　　}]
});
window.onresize = myChart.resize;

因为数据都是从后台传过来的，刚开始又不懂各个参数是什么意思，所以找不到问题所在，到现在才发现图形的类型传错了，传过来的是BT（用来区分是什么类型的图形），所以类型哪里显示的一直是BT，然后控制台报错 Component series.BT not exists. Load it first. 也不知道是个什么意思，在页面里面找BT也找不到，百度各种情况也没有一种是符合自己的情况，真实麻烦。然后又一个个排除，终于发现了这个错误，所以还是要细心啊。

　　做饼状图的时候代码又不一样，因为条件少了。

这是我写饼状图的部分代码：

//加载图表
var myChart = echarts.init(document.getElementById('main'));

myChart.setOption({
    title: {
   　　 text: reportName, //正标题
　　　  link: "", //正标题链接 点击可在新窗口中打开
　　　　x: "center", //标题水平方向位置
　　　　//正标题样式
　　　　textStyle: {
　　　　　　fontSize:bzwt
　　　　}
　　},
　　tooltip : {
　　　　trigger: 'item',
　　　　formatter:" {b}:{c} ({d}%)",
　　　　textStyle: {
　　　　　　fontSize:bzw
　　　　}
　　},
　　legend: {
　　　　orient:'vertical',
　　　　left:'left',
　　　　data:oneArr
　　}, 
　　series : [
　　{
　　　　name:'库存',
　　　　type:'pie',
　　　　radius:'55%',
　　　　center:['50%','60%'],
　　　　itemStyle:{
　　　　　　normal:{
　　　　　　　　label:{
　　　　　　　　textStyle: {
　　　　　　　　　　fontSize:bzwti
　　　　　　　　}
　　　　　　}
　　　　},
　　　　emphasis:{
　　　　　　shadowBlur:10,
　　　　　　shadowOffsetX:0,
　　　　　　shadowColor:'rgba(0,0,0,0.5)',
　　　　　　label:{
　　　　　　　　textStyle: {
　　　　　　　　　　fontSize:bzw
　　　　　　　　}
　　　　　　}
　　　　}
　　},
　　data:xArr
//data:Xval
　　}
] 

});
window.onresize = myChart.resize;

　　因为只有两个数据显示，所以分不清谁是谁，然后比较才知道oneArr是一个装数据的数组，类似这种["27.36", "15.32", "11.83", "8.40", "8.33", "7.67", "6.84", "5.08", "4.66", "4.51"]，series中的data是一个里面是装有很多对象的数组，然后格式就是类似这种[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]。里面的对象格式是这样的： { name: "高斯贝尔数码科技， "value: "27.36"}

　　当然图表需要初始化

//定义图表大小

var bzw = document.body.clientWidth/32;
var bzwt = document.body.clientWidth/28;
var bzwz = document.body.clientWidth/48;
var bzwti = document.body.clientWidth/40;
var xd = 50/640*document.body.clientWidth+10;
var xc = 40/640*document.body.clientWidth+10;
var yd = 80/640*document.body.clientWidth+10;

//页面加载完毕
window.uexOnload = function(){
　　var chartContainer = document.getElementById("main");
　　chartContainer.style.width = document.body.clientWidth +'px';
　　chartContainer.style.height = document.body.clientWidth*0.5 +'px';
　　DrawEChartLoad();
}

//图表初始化

function DrawEChartLoad(){
　　var myChart = echarts.init(document.getElementById('main'));
　　myChart.showLoading();
}

　　然后差不多就是这样。。。