关于echart.js的基本数据配置

关于echart.js的基本数据配置

渲染一个echart的步骤

1. 通过echart获取dom节点生成echart实例,可选择配置的主题。chart

   var chart echarts.init(element[0], theme);	
   //创建一个 ECharts 实例，返回 echartsInstance，不能在单个容器上初始化多个 ECharts 实例。
   

2. 通过Echarts实例，设置图表数据，之后的数据改变也是通过该接口来实现的

   //设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过 setOption 完成，
   //ECharts 会合并新的参数和数据，然后刷新图表。
   //如果开启动画的话，ECharts 找到两组数据之间的差异然后通过合适的动画去表现数据的变化。
   // arguments -1
    	chart.setOption(option, notMerge, lazyUpdate);
   // arguments -2
       chart.setOption(option, {
   	    notMerge: ...,
   	    lazyUpdate: ...,
   	    silent: ...
   	});
   // options : 图表的配置项和数据，具体见配置项手册。
   // notMerge : 可选，是否不跟之前设置的 option 进行合并，默认为 false，即合并。 类似 extend
   // 如果数据格式改变 echart 渲染会保留原来的数据 所以改为true。 数据不进行合并
   

3. Echarts释放 。 dispose

   	//销毁实例，销毁后实例无法再被使用。
   	echartsInstance.dispose();
   

4. 一些echart的其他操作
   • 加载动画 showLoading

     // 显示加载动画效果。可以在加载数据前手动调用该接口显示加载动画，在数据加载完成后调用 hideLoading 隐藏加载动画
     // (type?: string, opts?: Object)
     //type
     //可选，加载动画类型，目前只有一种'default'
     //opts
     //可选，加载动画配置项，跟type有关，下面是默认配置项：
     /*	default: {
     		  text: 'loading',
     		  color: '#c23531',
     		  textColor: '#000',
     		  maskColor: 'rgba(255, 255, 255, 0.8)',
     		  zlevel: 0
     	} */
      echartsInstance.showLoading (); //打开加载动画
      echartsInstance.hideLoading ();//关闭加载动画
     

   • 容器大小发生变化时需要手动调用 resize

      echartsInstance.resize ();
     

option 简单配置

• options.xAix
  x轴的数据展示 系列轴1 系列轴2 系列轴3
• options.series
  每根轴中的数据

option =  {
       color: ['#0685ff','#3f7a44', '#f41919', '#72b3ff', '#62c21b'],
       tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        // 坐标系位置
        grid: {
        // top: '20px',
            left: '20px',
            right: '20px',
            bottom: '100px',
            containLabel: true
        },
        legend: {
            data: ['轴1','轴2', '轴3', '轴4']
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        calculable: true,
        xAxis: {
            type: 'category',
            axisLabel:{
                interval: 0,
                rotate : dataConfig.names.length < 4? 0 : 90, 
            },
            // axisTick: {show: true},
            data:dataConfig.names
        },
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '轴1',
                type: 'bar',
                barGap: 0,
                data: dataConfig.countType.personNum
            },
            {
                name: '轴2',
                type: 'bar',
                barGap: 0,
                data: dataConfig.countType.sumNum
            },
            {
                name: '轴3',
                type: 'bar',
                data: dataConfig.countType.sj 
            },
            {
                name: '轴4',
                type: 'bar',
                data: dataConfig.countType.jsjj
            }
        ]
    };