Echarts在线免费图表

 
            var upColor = '#ec0000'
var upBorderColor = '#8A0000'
var downColor = '#00da3c'
var downBorderColor = '#008F28'
var data0 = splitData([
    ['20150515', 129.873489, 126.26989, 124.631897, 133.055893],
    ['20150518', 125.567886, 127.252693, 119.015892, 130.669083],
    ['20150519', 127.90789, 128.703491, 125.099884, 129.499084],
    ['20150520', 130.715897, 128.656693, 128.282288, 136.144684],
    ['20150521', 128.75029, 136.6595, 125.942291, 137.735886],
    ['20150522', 150.559097, 136.565887, 128.656693, 150.605896],
    ['20150525', 134.225891, 132.541092, 128.282288, 134.366287],
    ['20150526', 132.494293, 135.536301, 130.247894, 139.888687],
    ['20150527', 135.583099, 133.757889, 132.119888, 137.689087],
    ['20150528', 133.336685, 120.513489, 120.139091, 133.336685],
]);

function splitData(rawData) {
    var categoryData = [];
    var values = []
    for (var i = 0; i < rawData.length; i++) {
        categoryData.push(rawData[i].splice(0, 1)[0]);
        values.push(rawData[i])
    }
    return {
        categoryData: categoryData,
        values: values
    };
}
var datavol = [
    [0, 30487.394531, 1],
    [1, 21326.496094, -1],
    [2, 19926.496094, -1],
    [3, 21009.402344, 1],
    [4, 26390.171875, -1],
    [5, 53560.042969, 1],
    [6, 35752.777344, 1],
    [7, 37754.914063, -1],
    [8, 27329.701172, 1],
    [9, 39693.589844, 1],
];
option = {
    title: {
        text: 'SH600678',
        left: '3%'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        },
        formatter: function(params, ticket, callback) {
            // alert(JSON.stringify(params))
          var str = ""
          var showSeries=params.length
          if(showSeries>0){
             str= params[0].axisValueLabel +"<br>"
             //生成K线
             for(var i=0;i<showSeries;i++){
                 var s = params[i]
                 if (s.componentSubType=="candlestick"){
                     str += " - open:"+s.value[1]+"<br>"
                     str += " - close:"+s.value[2]+"<br>"
                     str += " - low:"+s.value[3]+"<br>"
                     str += " - high:"+s.value[4]+"<br>"
                     break;
                 }
             }
             //按顺序生成数据
             axisNum = myChart.getOption().xAxis.length             
             for(var ai=0;ai<axisNum;ai++){
             	   var added = false         	
             	   for(var j=0;j<showSeries;j++){
	             	   var s = params[j]
	             	   if(s.axisIndex==ai &&s.axisDim=='x' ){
		                 if (s.componentSubType=="candlestick"){
		                    continue
		                 }else if(s.componentSubType=="bar"){		                 	
		                 	  str += s.marker+s.seriesName+":"+s.value[1]+"<br>"
		                 	  added = true
		                 }else{
		                 	  str += s.marker+s.seriesName+":"+s.value+"<br>"
		                 	  added = true
		                 }
	             	   }	             	   
                 } 
                 if(added&&ai<axisNum-1||!added&&ai==0){
                 	  str += "<br>"
                 }
             }
          }
          return str
        }
    },

    axisPointer: {
        link: {
            xAxisIndex: 'all'
        },
        label: {
            backgroundColor: '#777'
        }
    },
    grid: [{
        left: '10%',
        right: '10%',
        top: 80,
        height: 250
    }, {
        left: '10%',
        right: '10%',
        top: 360,
        height: 100
    }, ],
    xAxis: [{
        type: 'category',
        gridIndex: 0,
        data: data0.categoryData,
        scale: true,
        boundaryGap: false,
        axisLine: {
            onZero: false
        },
        splitLine: {
            show: false
        },
        splitNumber: 20,
        min: 'dataMin',
        max: 'dataMax'
    }, {
        type: 'category',
        gridIndex: 1,
        data: data0.categoryData,
        scale: true,
        boundaryGap: false,
        axisLine: {
            onZero: true
        },
        splitLine: {
            show: false
        },
        splitNumber: 20,
        min: 'dataMin',
        max: 'dataMax'
    }, ],
    yAxis: [{
        scale: true,
        gridIndex: 0,
        splitNumber: 3,
        splitArea: {
            show: true
        }
    }, {
        scale: true,
        gridIndex: 1,
        splitNumber: 3,
        splitArea: {
            show: true
        }
    },  ],

    series: [{
            name: 'K线',
            type: 'candlestick',
            dimensions: ['date', 'open', 'close', 'low', 'high'],
            data: data0.values,
            itemStyle: {
                normal: {
                    color: upColor,
                    color0: downColor,
                    borderColor: upBorderColor,
                    borderColor0: downBorderColor
                }
            },
        },{
            name: 'vol',
            type: 'bar',
            xAxisIndex: '1',
            yAxisIndex: '1',
            data: datavol,
            smooth: true,
            lineStyle: {
                normal: {
                    opacity: 0.5
                }
            }
        },
    ],
};