echarts图表用法

TaskStatisticsHistogram();
function TaskStatisticsHistogram() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById(‘TaskStatisticsHistogram’));

            // 指定图表的配置项和数据
            var option = {
                color: ['#FFB48C', '#45C0A3'],
                //更改canvas图表位置
                grid: {
                    left: '4%',
                    right: '4%',
                    bottom: '10%',
                    top: '30%'
                },
                //更改顶部索引
                legend: {
                    top: -0,
                    right: 70,
                    icon: "circle",
                     itemGap:2//图例之间的间距
                },
                tooltip: {},
                dataset: {
                    dimensions: ['product', '2015', '2016',],
                    source: [
                        { product: 'Matcha Latte', '2015': 43.3, '2016': 85.8 },
                        { product: 'Milk Tea', '2015': 83.1, '2016': 73.4 },
                        { product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2 },
                        { product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9 }
                    ]
                },
                xAxis: { type: 'category' },
                yAxis: {},
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [
                    { type: 'bar' },
                    { type: 'bar' },

                ]
            };
            //多个图表 监听widow 的resize事件
            window.addEventListener("resize", function () {
                myChart.resize();
                //浏览器变化 图表也跟着变化
            });

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        };