echarts

 // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('LeftEar'));
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '左耳'
        },

        tooltip: {
            trigger: 'axis',
            formatter: function (val) {//鼠标hover时显示的内容 val是相关对象
                var str = ""
                str += val[0].seriesName + ":" + g_RigthQD[val[0].dataIndex] + "<br>"
                str += val[1].seriesName + ":" + g_RigthGD[val[1].dataIndex]
                return str
            }
        },
        legend: {
            selectedMode: false,
            //data: ['气导', '骨导']
            data: [
                {
                    name: '气导',
                    icon: 'image://http://' + domain + '/PEIS_MS/PhyExaManagement/PhysicalExaminer/Image/b2.png'
                },
                {
                    name: '骨导',
                    icon: 'image://http://' + domain + '/PEIS_MS/PhyExaManagement/PhysicalExaminer/Image/g8.png'
                }
            ]
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '5%',
            top: '50px',
            containLabel: true
        },
        //下载按钮
        //toolbox: {  
        //    feature: {
        //        saveAsImage: {}
        //    }
        //},
        xAxis: {
            type: 'category',
            boundaryGap: true,
            "axisLine": {
                "show": false  //隐藏x轴线
            },
            "axisTick": {
                "show": false //隐藏x轴刻度
            },
            splitLine: {
                show: true
            },
            data: [500, 1000, 2000, 3000, 4000, 6000]
        },
        yAxis: [{
            min: 130, //y轴的最小值
            max: -20, //y轴最大值
            interval: 10, //值之间的间隔
            ////reverse: true,
            //type: 'value',

            type: 'value',
            inverse: true,
            scale: true

        }],
        animation: false,
        series: [{
            name: '气导',
            type: 'line',
            data: g_LeftQDMount,
            itemStyle: {
                normal: {
                    color: '#00B0F0',
                    lineStyle: {
                        color: '#00B0F0'
                    }
                }
            },
            markPoint: {
                data: [{
                    name: 'QD500',
                    yAxis: g_LeftQD[0],
                    xAxis: '500',
                    value: '',
                    symbol: 'image://http://' + domain + '/PEIS_MS/PhyExaManagement/PhysicalExaminer/Image/' + g_LeftQDpicture[0] + '.png',
                    symbolSize: 15
                },
                {
                    name: 'QD1000',
                    yAxis: g_LeftQD[1],
                    xAxis: '1000',
                    value: '',
                    symbol: 'image://http://' + domain + '/PEIS_MS/PhyExaManagement/PhysicalExaminer/Image/' + g_LeftQDpicture[1] + '.png',
                    symbolSize: 15
                },
                {
                    name: 'QD2000',
                    yAxis: g_LeftQD[2],
                    xAxis: '2000',
                    value: '',
                    symbol: 'image://http://' + domain + '/PEIS_MS/PhyExaManagement/PhysicalExaminer/Image/' + g_LeftQDpicture[2] + '.png',
                    symbolSize: 15
                },
                {
                    name: 'QD3000',
                    yAxis: g_LeftQD[3],
                    xAxis: '3000',
                    value: '',
                    symbol: 'image://http://' + domain + '/PEIS_MS/PhyExaManagement/PhysicalExaminer/Image/' + g_LeftQDpicture[3] + '.png',
                    symbolSize: 15
                },
                {
                    name: 'QD4000',
                    yAxis: g_LeftQD[4],
                    xAxis: '4000',
                    value: '',
                    symbol: 'image://http://' + domain + '/PEIS_MS/PhyExaManagement/PhysicalExaminer/Image/' + g_LeftQDpicture[4] + '.png',
                    symbolSize: 15
                },
                {
                    name: 'QD6000',
                    yAxis: g_LeftQD[5],
                    xAxis: '6000',
                    value: '',
                    symbol: 'image://http://' + domain + '/PEIS_MS/PhyExaManagement/PhysicalExaminer/Image/' + g_LeftQDpicture[5] + '.png',
                    symbolSize: 15
                }

                ]
            },
        },
        {
            name: '骨导',
            type: 'line',
            data: g_LeftGDMount,
            itemStyle: {
                normal: {
                    color: '#5959F8',
                    lineStyle: {
                        color: '##5959F8',
                        type: 'dotted'  //'dotted'虚线 'solid'实线
                    }
                }
            },
            markPoint: {
                data: [{
                    name: 'GD500',
                    yAxis: g_LeftGD[0],
                    xAxis: '500',
                    value: '',
                    symbol: 'image://http://' + domain + '/PEIS_MS/PhyExaManagement/PhysicalExaminer/Image/' + g_LeftGDpicture[0] + '.png',
                    symbolSize: 15
                },
                {
                    name: 'GD1000',
                    yAxis: g_LeftGD[1],
                    xAxis: '1000',
                    value: '',
                    symbol: 'image://http://' + domain + '/PEIS_MS/PhyExaManagement/PhysicalExaminer/Image/' + g_LeftGDpicture[1] + '.png',
                    symbolSize: 15
                },
                {
                    name: 'GD2000',
                    yAxis: g_LeftGD[2],
                    xAxis: '2000',
                    value: '',
                    symbol: 'image://http://' + domain + '/PEIS_MS/PhyExaManagement/PhysicalExaminer/Image/' + g_LeftGDpicture[2] + '.png',
                    symbolSize: 15
                },
                {
                    name: 'GD3000',
                    yAxis: g_LeftGD[3],
                    xAxis: '3000',
                    value: '',
                    symbol: 'image://http://' + domain + '/PEIS_MS/PhyExaManagement/PhysicalExaminer/Image/' + g_LeftGDpicture[3] + '.png',
                    symbolSize: 15
                },
                {
                    name: 'GD4000',
                    yAxis: g_LeftGD[4],
                    xAxis: '4000',
                    value: '',
                    symbol: 'image://http://' + domain + '/PEIS_MS/PhyExaManagement/PhysicalExaminer/Image/' + g_LeftGDpicture[4] + '.png',
                    symbolSize: 15
                },
                {
                    name: 'GD6000',
                    yAxis: g_LeftGD[5],
                    xAxis: '6000',
                    value: '',
                    symbol: 'image://http://' + domain + '/PEIS_MS/PhyExaManagement/PhysicalExaminer/Image/' + g_LeftGDpicture[5] + '.png',
                    symbolSize: 15
                }

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

 

 

 var myChart=echarts.init(document.getElementById('main'));
    //init初始化接口，返回ECharts实例，其中dom为图表所在节点
       
    var option = {
        //标题
        title : {
            show:true, //显示策略，默认值true,可选为：true（显示） | false（隐藏）
            text: '主标题', //主标题文本，'\n'指定换行
            link:'', //主标题文本超链接,默认值true（链接地址）
            target: null, //指定窗口打开主标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
            subtext: '副标题', //副标题文本，'\n'指定换行
            sublink: '', //副标题文本超链接
            subtarget: null, //指定窗口打开副标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
            x:'center' //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
            y: 'top', //垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
            textAlign: null ,//水平对齐方式，默认根据x设置自动调整，可选为： left' | 'right' | 'center
            backgroundColor: 'rgba(0,0,0,0)', //标题背景颜色，默认'rgba(0,0,0,0)'透明
            borderColor: '#ccc', //标题边框颜色,默认'#ccc'
            borderWidth: 0, //标题边框线宽，单位px，默认为0（无边框）
            padding: 5, //标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距
            itemGap: 10, //主副标题纵向间隔，单位px，默认为10
            textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
                fontFamily: 'Arial, Verdana, sans...',
                fontSize: 12,
                fontStyle: 'normal',
                fontWeight: 'normal',
            },
            subtextStyle: {//副标题文本样式{"color": "#aaa"}
                fontFamily: 'Arial, Verdana, sans...',
                fontSize: 12,
                fontStyle: 'normal',
                fontWeight: 'normal',
            },
            zlevel: 0, //一级层叠控制。默认0,每一个不同的zlevel将产生一个独立的canvas，相同zlevel的组件或图标将在同一个canvas上渲染。zlevel越高越靠顶层，canvas对象增多会消耗更多的内存和性能，并不建议设置过多的zlevel，大部分情况可以通过二级层叠控制z实现层叠控制。
            z: 6, //二级层叠控制，默认6,同一个canvas（相同zlevel）上z越高约靠顶层。
        },




        //提示框，鼠标悬浮交互时的信息提示
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        //图例，每个图表最多仅有一个图例
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['第一部分','第二部分','第三部分','第四部分']
        },
        // 系列列表,每个系列通过 type 决定自己的图表类型
        series : [
            {
                name: '访问',
                type: 'pie',
                radius : '62%',
                center: ['50%', '65%'],/
                minAngle:'15',
                data:[
                    {name:"第一部分",value:4},
                    {name:"第二部分",value:7},
                    {name:"第三部分",value:3},
                    {name:"第四部分",value:1},
                ],
                itemStyle: {
                    normal:{
                        label:{
                            show:true,
                            formatter: "{b} :\n  {c} \n ({d}%)",
                            position:"inner"
                        }
                    }
                }
            }
        ],
    };
    myChart.setOption(option);// 为echarts对象加载数据
    var myChart=echarts.init(document.getElementById('main'));
    //init初始化接口，返回ECharts实例，其中dom为图表所在节点

 

tooltip: {
    show: true,    // 是否显示提示框组件
    trigger: 'axis',    // 触发类型（'item'，数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用；'axis'，坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用；'none'，不触发。）
    axisPointer: {
        type: 'cross',    // 指示器类型（'line' 直线指示器；'shadow' 阴影指示器；'none' 无指示器；'cross' 十字准星指示器。）
        snap: false,    // 坐标轴指示器是否自动吸附到点上。默认自动判断。
        label: {
            margin: 10,    // label 距离轴的距离
            color: '#FFF',     // 文字的颜色
            fontStyle: 'normal',    // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体） 
            fontWeight: 'normal',    // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
            fontSize: '20',    // 文字字体大小
            lineHeight: '50',    // 行高 
            padding = [5, 7, 5, 7],    // 内边距，单位px 
            backgroundColor = 'auto',    // 文本标签的背景颜色
        },
        animation: true,     // 是否开启动画
        animationDuration: 1000,     // 初始动画时长
        animationDurationUpdate: 200,    // 数据更新动画的时长
    }
    showContent: true,     // 是否显示提示框浮层，默认显示
    alwaysShowContent: true,     // 是否永远显示提示框内容，默认情况下在移出可触发提示框区域后一定时间后隐藏
    triggerOn: 'mousemove|click',    // 提示框触发的条件（'mousemove'，鼠标移动时触发；'click'，鼠标点击时触发；'mousemove|click'，同时鼠标移动和点击时触发；'none'，不在 'mousemove' 或 'click' 时触发）
    confine: true,    // 是否将 tooltip 框限制在图表的区域内
    backgroundColor: 'rgba(50,50,50,0.7)',    // 提示框浮层的背景颜色
    padding: 5,    // 提示框浮层内边距，单位px
    textStyle: {
        color: '#FFF',     // 文字的颜色
        fontStyle: 'normal',    // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体） 
        fontWeight: 'normal',    // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
        fontSize: '20',    // 文字字体大小
        lineHeight: '50',    // 行高 
    },
    formatter: function (params) {
        var result = ''
        var dotHtml = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:30px;height:30px;background-color:#F1E67F"></span>'    // 定义第一个数据前的圆点颜色
        var dotHtml2 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:30px;height:30px;background-color:#2BA8F1"></span>'    // 定义第二个数据前的圆点颜色
        result += params[0].axisValue + "</br>" + dotHtml + ' 数据名称 ' + params[0].data + "</br>" + dotHtml2 + ' 数据名称 ' + params[1].data;
        return result
    }
}

yAxis: [
  {
    show: true, // 是否显示 Y轴
    type: 'value', //('value''category''time''log')
    name: '降雨量(mm)', // 坐标轴名称
    nameLocation: 'end', // 坐标轴名称显示位置。('start''middle''center''end')
    //nameTextStyle: {...}, // 坐标轴名称的文字样式。
    //nameGap: 15, // 坐标轴名称与轴线之间的距离。
    //nameRotate: 0, // 坐标轴名字旋转，角度值。
    //inverse: false, // 是否是反向坐标轴。ECharts 3 中新加。
    //scale: false, // 只在数值轴中（type: 'value'）有效。是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。在设置 min 和 max 之后该配置项无效。
    splitNumber: 5 , // 坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。
    minInterval: 0 , // 自动计算的坐标轴最小间隔大小。
    //maxInterval
    //interval  // 强制设置坐标轴分割间隔。
    silent: false , // 坐标轴是否是静态无法交互。
    position: "left", // 默认 grid 中的第一个 y 轴在 grid 的左侧（'left'），第二个 y 轴视第一个 y 轴的位置放在另一侧。
    //offset: 0, // Y 轴相对于默认位置的偏移，在相同的 position 上有多个 Y 轴的时候有用。
    //gridIndex: 0 , // y 轴所在的 grid 的索引，默认位于第一个 grid。(一般用于多个Y轴时)
    //max: 5, // 设置最大值，不设置会自动计算
    //min: 0,
    triggerEvent: false , // 坐标轴的标签是否响应和触发鼠标事件，默认不响应。
    axisLine: { // 坐标轴刻度相关设置。
      show: true ,
      alignWithLabel: false ,// 类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐。
      interval: 'auto' , // 坐标轴刻度的显示间隔，在类目轴中有效。默认同 axisLabel.interval 一样。
      inside: false , // 坐标轴刻度是否朝内，默认朝外。
      length: 5 , // 坐标轴刻度的长度。
      lineStyle: { // 刻度线的样式设置。
        color: "#ccc", // 刻度线的颜色，默认取 axisTick.lineStyle.color。
        width: 1 ,
        type: 'solid' , // (实线：'solid'，虚线：'dashed'，星罗棋布的：'dotted')
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        shadowBlur: 10,
        shadowOffsetX: 0 ,
        shadowOffsetY: 0 ,
        opacity: 1
      } ,
    } , // 坐标轴轴线相关设置。
    axisTick: {
      //...(同上)
    } ,
    //minorTick: {} , // 坐标轴次刻度线相关设置。注意：次刻度线无法在类目轴（type: 'category'）中使用。
    axisLabel: { // 坐标轴刻度标签的相关设置。
      show: true ,
      interval: 'auto' ,
      inside: false ,
      rotate: 0 ,
      margin: 8 ,
      //formatter ... ,
      //showMinLabel ... ,
      //showMaxLabel ... ,
      //color ... ,
      fontStyle: 'normal' ,
      fontWeight: normal ,
      fontFamily: 'sans-serif' ,
      fontSize: 12 ,
      //align ... ,
      //verticalAlign ... , // 文字垂直对齐方式，默认自动。
      //lineHeight ... ,
      backgroundColor: 'transparent' ,
      borderColor: 'transparent' ,
      borderWidth: 0 ,
      borderRadius: 0 ,
      padding: 0 ,
      shadowColor: 'transparent' ,
      shadowBlur: 0 ,
      shadowOffsetX: 0 ,
      shadowOffsetY: 0 ,
      //width ... ,
      //height ... ,
      textBorderColor: 'transparent' ,
      textBorderWidth: 0 ,
      textShadowColor: 'transparent' ,
      textShadowBlur: 0 ,
      textShadowOffsetX: 0 ,
      textShadowOffsetY: 0 ,
      rich: {  //富文本样式
        //...
      } ,
    } ,
    splitLine: {  // 坐标轴在 grid 区域中的分隔线。
      show: true ,
      interval: 'auto' ,
      lineStyle: {
        //...
      } ,
    } ,
    //minorSplitLine: {} , // 坐标轴在 grid 区域中的次分隔线。次分割线会对齐次刻度线 minorTick
    //splitArea: {} , // 坐标轴在 grid 区域中的分隔区域，默认不显示。
    //data: [{}] , // 类目数据，在类目轴（type: 'category'）中有效。 ...
    //axisPointer: {} , //
    zlevel: 0 , // Y 轴所有图形的 zlevel 值。
    z: 0 , // Y 轴组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。z相比zlevel优先级更低，而且不会创建新的 Canvas。
  }
]