Echarts在线免费图表

 
            var uploadedDataURL = "/asset/get/s/data-1512008413702-H181j16gM.jpg";
//求大神指点如何实现双Y轴刻度移动到网格线两端，还有数据颜色的变换如何实现？
//下面就是双y轴的颜色设置和第一个柱状图的点击变换颜色事件
option = {
    title: {
        text: 'Awesome Chart'
    },
    legend: {
        data: ['降水量', '平均温度']
    },
    xAxis: [{
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        axisPointer: {
            type: 'shadow'
        }
    }],
    yAxis: [{
        type: 'value',
        name: '水量',
        axisLabel: {
            formatter: '{value} ml'
        }
    }, {
        type: 'value',
        name: '温度',
        min: 0.000000001, //如果使用0，会出现你之前的情况，必须大于0的，使用0.000000001无限接近0
        axisLabel: {
            formatter: function(value, index) {
                if (index === 0) { //因为最小值不是0，重新赋值0
                    value = 0;
                }
                return value + "℃";
            }
        }
    }],
    series: [{
        name: '降水量',
        type: 'bar',
        // data: [440, 420, 410, 440, 450, 460, 450.6, 430, 420, 410, 455, 432]
        // data: [440, 420, 410, 440, 450, 460, 450.6, 430, 420, 410, 455, 432]
        data:[
            {
                value: 440,
                label: {},
                itemStyle:{
                    normal:{
                        color : "green",  //柱状图的颜色
                        borderColor : "black",  //边框的颜色
                        borderWidth : 10  //边框宽度
                    }
                }
            },    
            {
                value: 420,
                label: {},
                itemStyle:{}
            },
            {
                value: 410,
                label: {},
                itemStyle:{}
            },
            {
                value: 440,
                label: {},
                itemStyle:{}
            },
            {
                value: 450,
                label: {},
                itemStyle:{}
            },
            {
                value: 460,
                label: {},
                itemStyle:{}
            },
            {
                value: 450.6,
                label: {},
                itemStyle:{}
            },
            {
                value: 430,
                label: {},
                itemStyle:{}
            },
            {
                value: 420,
                label: {},
                itemStyle:{}
            },
            {
                value: 410,
                label: {},
                itemStyle:{}
            },
            {
                value: 455,
                label: {},
                itemStyle:{}
            },
            {
                value: 432,
                label: {},
                itemStyle:{}
            },
            
        ]
    }, {
        name: '平均温度',
        type: 'line',
        yAxisIndex: 1, //当只有一个Y轴时，该参数默认为0，且链接的就是一个Y轴；有双轴时，从0 开始，依次累加1。
        data: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1, 1.1]
    }]
};

//点击事件
var array = ["red","orange","green","aqua","blue","purple"],key = 0; //定义颜色和颜色数组下标
myChart.on('click', function (params) { //点击
    var myChartOption = myChart.getOption();  //获取echart.option
    if (params.componentType === 'series') { //判断点击的是否series
        if (params.seriesIndex === 0) {  //判断series的下标
            //重新赋值颜色
            myChartOption.series[params.seriesIndex].data[params.seriesIndex].itemStyle.normal.color = array[key];
            key++;
            if(key == array.length){  //到了数组长度，循环重新开始
                key = 0;
            }
        }
    }
    myChart.setOption(myChartOption); //初始化echart.option 

});