Echarts - 1

初学

PartA - 基本框架

var myCharts = echarts.init (DOM)，将charts放入一个div中

var option = { 

}

myCharts.setOption(option);

基本格式如上，如果是获取JSON数据文件，则：

$.get('…… .json', function (data) {

    option = { 

    }

    myCharts.setOption(option);

}

---

重点option中设置图标详细参数。

option = { 

    background：       ，  //全局参数北京

    legend: {},

    tooltip: {},

    grid: [{right: bottom:}，{}],    //设置size = %

    xAxis: [{type: , gridIndex: , name: , boundaryGap: true/flase , axisLabel: {rotate: , interval: },{}] ,

    yAxis: [{},{}] ,     //同上

    dataset: {

         dimensions: [            //几个维度

                '',

                {name: '', type: ''}

            ],

            source: data   //读取的数据来源

    } 

    visualMap:{ 详见visualMap }

    series:[

             {

                label:{  见PartB },

                labelLine:{ 见PartB },

               itemStyle{ 见PartB },

                type: '',

                symbolSize: symbolSize,

                xAxisIndex: ,                //放在哪个index中

                yAxisIndex: ,

                encode: {        //作为映射，坐标系、标签: 维度名（string）或维度的序号（number），可用数组指定≥1个维度

                    x: '',

                    y: '',

                    tooltip: [0, 1, 2, 3, 4]

                }

            },

    ]

 }

图形的type 有 scatter, bar, pie, line

数据的type 有 category, value

维度类型 type 有 number, ordinal （如果需要使用string）, float, int, time

---

Part B - 正常和hover的不同显示

normal: { Part C },

emphasis:{ Part C },

---

Part C - 不同Style

textStyle: {},

lineStye: {},

shadowBlur: 

shadowColor:

对于Style，可以使用visualMap进行映射，即：

---

VisualMap

visualMap: {

        orient: 'horizontal',

        left: 'center',

        min: 10,

        max: 100,

        text: ['High Score', 'Low Score'],

        // Map the score column to color

        dimension: 0,

        inRange: {

            color: ['#D7DA8B', '#E15457']

        }

    },