echarts配置

echarts设置div宽高 然后初始化

<div class="canvas" id="canvas" style="width: 800px;height: 300px;"></div>

echarts.init(document.getElementById("canvas"));
var options = {
    color: [],
    tooltip: {},
    legend: {},
    ......
}
myChart.setOption(options, true);

1.折线图

var option = {
    color: ['#f00', '#f0f', '#ff0'],
    tooltip: {// tooltip 用于控制鼠标滑过或点击时的提示框
        trigger: 'axis',
        show: true,
        showContent: true,
        confine: false,
        formatter: function (resData) {
            var str = "<div><p>"+resData[0].axisValue+"</p>"
            $.each(resData, function (index, item) {
                str += '<p style="color: '+item.color+'">&nbsp;&nbsp;'+item.seriesName+"&nbsp;&nbsp;:&nbsp;&nbsp;"+item.value+'</p>'
            })
            str += "</div>"
            return str
        },
        textStyle: {
            fontWeight: 'bold',
            align: "center",
            fontSize: 12,
            color: "#333"
        },
        axisPointer: {
            type: 'line', // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。
            renderMode: 'html', // 浮层的渲染模式，默认以 'html 即额外的 DOM 节点展示 tooltip；
            axis: 'auto', // 指示器的坐标轴。
            snap: true, // 坐标轴指示器是否自动吸附到点上
            lineStyle: {
                color: "#a8a8a8"
            }
        },
        borderRadius: 2,
        padding: [10, 25],
    },
    legend: {
        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
        textStyle: {
            fontSize: 12
        }
    },
    grid: {// 图表距离边框的距离，可用百分比和数字（px）配置
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
        top: 30,
    },
    textStyle: {
        fontSize: 12,
        fontStyle: 'normal',
        fontWeight: 'normal',
        color: '#A0A4AA',
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisLine: {
            show: true
        },
        axisTick: {
            axisTick: false, // x轴的刻度线不显示
        },
        axisLabel: {
            show: true,
            fontSize: 10,
            align: 'center',
        },
    },
    yAxis: {
        type: 'value'
    },
    series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};
return option;

2.柱状图

var option = {
    color: ['#2DBDD0'],
    tooltip: {
        show: true,
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        },
        formatter: function (resData) {
            var str = "<div class='text-align: center;'>"
            $.each(resData, function (index, item) {
                str += '<span>'+item.axisValue+'</span><p style="color: '+item.color+'">专利数量：&nbsp;'+item.value+'</p>'
            })
            str += "</div>"
            return str
        },
        textStyle: {
            color: '#000',
            fontSize: 14
        }
    },
    legend: {},
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: 10,
        containLabel: true
    },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
        axisLabel: {
            show: true,
            fontSize: 10
        },
    },
    yAxis: {
        type: 'category',
        data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'],
        axisLabel: {
            show: true,
            fontSize: 10
        },
    },
    series: [
    {
      name: '2011',
      type: 'bar',
      data: [18203, 23489, 29034, 104970, 131744, 630230]
    },
    {
      name: '2012',
      type: 'bar',
      data: [19325, 23438, 31000, 121594, 134141, 681807]
    }
  ]
};

3.旭日图

var option = {
    color: ['#f00', '#f0f', '#ff0', ...],
    tooltip: {
        trigger: 'item',
        formatter: function (resData) {
            return "<p style='text-align: center;width: 300px;  word-break: break-all;'>"+resData.data.name+"</p><p style='color: "+resData.color+";'>count: &nbsp;"+resData.data.value+"</p>"
        },
        borderRadius: 2,
        padding: [10, 25],
        extraCssText: "max-width:400px;white-space:pre-wrap",
        textStyle: {
            fontWeight: 'bold',
            align: 'center',
            fontSize: 12
        },
    },
    series: [
        {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [5, 50],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
                borderRadius: 2
            },
            label: {
                formatter: function (params) { // 技术分支 涉诉技术分布
                    var d = params.data;
                    var subI = d.name.indexOf('(');
                    return d.name.substr(0, subI) + d.name.substr(subI, subI + 10) + '...) : ' + d.value
                },
            },
            data: [
        { value: 40, name: 'rose 1' },
        { value: 38, name: 'rose 2' },
        { value: 32, name: 'rose 3' },
        { value: 30, name: 'rose 4' },
        { value: 28, name: 'rose 5' },
        { value: 26, name: 'rose 6' },
        { value: 22, name: 'rose 7' },
        { value: 18, name: 'rose 8' }
      ]
        }
    ]
};