快速开发ECharts

快速开发ECharts

1. 导入js

 <!-- 引入 ECharts 文件 -->
 <script src="echarts.min.js"></script>

2. 初始化一个EChart

• 可指定主题，导入主题的js，具体可去官网下载echart_theme = '***'，直接在init的后面指定
• 设置一个空的option，后面可以动态的加载数据

var initECharts = function () {
    leheDebitProvinceTrendChart = echarts.init($('#lehe_debit_province_trend')[0], echart_theme);
    leheAlipayProvinceTrendChart = echarts.init($('#lehe_alipay_province_trend')[0], echart_theme);
    leheCreditProvinceTrendChart = echarts.init($('#lehe_credit_province_trend')[0], echart_theme);

    leheDebitProvinceTrendChart.setOption(buildBlankMultiLineOption());
    leheAlipayProvinceTrendChart.setOption(buildBlankMultiLineOption());
    leheCreditProvinceTrendChart.setOption(buildBlankMultiLineOption());
};

/**
 * 构建空的折线图
 * @returns
 */
function buildBlankMultiLineOption() {
    return {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: []
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        // toolbox: {
        //     feature: {
        //         saveAsImage: {}
        //     }
        // },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: []
    };
}

3.动态加载数据

var option = echart.getOption();
option.legend[0].data= legend_data;
option.xAxis[0].data = x_axis_month;
option.series = series;
echart.hideLoading();
echart.setOption(option, true);

• var option = echart.getOption()获取设置的option，返回内部持有的当前显示option克隆

• echart.setOption(option, true)加载填充的数据

  1. setOption(Object option,{boolean = true} notMerge)

  参数：

  1）Object类型的参数 option，表示图表数据结构

  2）boolean notMerge，表示是否合并option。默认为false，可以不设置。

  2. setSeries(Array series,{boolean=}notMerge)

  参数：

  1）Array类型的series序列数据，形如：

  var Array seriesList = [];
  var seriesObj = new seriesObj();
  seriesObj.name = "蒸发量"``;
  seriesObj.type = "line";
  seriesObj.data = [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3];
  //设置series
  myChart.setSeries(seriesList,false);
  

  2）boolean notMerge 表示是否合并series，默认为false，可以不设置。

  描述：

  数据接口，驱动图表生成的数据内容，效果等同调用setOption({series:{...}})

这样就可以选择ECharts官网的图表快速开发