• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

ECharts 折线图常用配置

武飞扬头像
yezi_12345
帮助2

学新通

代码如下:

  1.  
    <!DOCTYPE html>
  2.  
    <html lang="en">
  3.  
     
  4.  
    <head>
  5.  
    <meta charset="utf-8">
  6.  
    <title>折线图</title>
  7.  
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
  8.  
    <meta name="renderer" content="webkit">
  9.  
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  10.  
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
  11.  
    <script src="js/jquery-3.3.1.min.js"></script>
  12.  
    <script src="js/echarts.js"></script>
  13.  
    </head>
  14.  
     
  15.  
    <body>
  16.  
    <!-- 准备一个具备大小(宽高)的 DOM -->
  17.  
    <div id="line" style="width: 80%;height:600px;margin: 0 10%"></div>
  18.  
    </body>
  19.  
    <script>
  20.  
    // 图标响应式大小
  21.  
    $(document).ready(function() {
  22.  
    $(window).resize(function() {
  23.  
    var _width = $("#line").width();
  24.  
    myCharte.resize(_width);
  25.  
    console.log(_width);
  26.  
    });
  27.  
     
  28.  
    });
  29.  
    // 注册
  30.  
    var myCharte = echarts.init(document.getElementById('line'));
  31.  
    var option = {
  32.  
    // 标题
  33.  
    title: {
  34.  
    show: true, //是否显示标题组件true/false
  35.  
    text: '折线图', //标题
  36.  
    link: 'https://www.百度.com/', //标题链接
  37.  
    target: 'blank', //新链接打开方式'self'/'blank'
  38.  
    //主标题样式
  39.  
    textStyle: {
  40.  
    color: '#333',
  41.  
    fontStyle: 'normal',
  42.  
    fontWeight: 600,
  43.  
    fontFamily: 'sans-serif',
  44.  
    fontSize: 18,
  45.  
    },
  46.  
    // 副标题
  47.  
    subtext: '副标题', //副标题
  48.  
    sublink: 'https://www.百度.com/', //标题链接
  49.  
    subtarget: 'blank', //新链接打开方式'self'/'blank'
  50.  
    //副标题样式
  51.  
    subtextStyle: {
  52.  
    color: '#333',
  53.  
    fontStyle: 'normal',
  54.  
    fontWeight: 'normal',
  55.  
    fontFamily: 'sans-serif',
  56.  
    fontSize: 12,
  57.  
    },
  58.  
    //textAlign: 'center', //字体整体的水平对齐。可选值:'auto''left''right''center'
  59.  
    //textVerticalAlign: 'center', //字体整体的垂直对齐可选值:'auto''top''bottom''middle'
  60.  
    // padding: 5,// 设置内边距为 5
  61.  
    // padding: [5, 10],// 设置上下的内边距为 5,左右的内边距为 10
  62.  
    padding: [5, 10, 5, 10], // 上右下左
  63.  
    itemGap: 10, //主副标题之间的间距。
  64.  
    left: 'center', //grid 组件离容器左侧的距离,可选值'auto''left', 'center', 'right'
  65.  
    top: 'auto',
  66.  
    right: 'auto',
  67.  
    bottom: 'auto',
  68.  
    // backgroundColor: '#fff',
  69.  
    // borderColor: '#ccc',
  70.  
    // borderWidth: 0,
  71.  
    // borderRadius: 10,
  72.  
    // shadowColor: 'rgba(0,0,0,0.6)',
  73.  
    // shadowBlur: 10,
  74.  
    // shadowOffsetX: 2,
  75.  
    // shadowOffsetY: 5,
  76.  
     
  77.  
    },
  78.  
    // 提示框组件
  79.  
    tooltip: {
  80.  
    show: true,
  81.  
    trigger: 'axis', //'item'数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。'axis'坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。
  82.  
    //坐标轴指示器配置项。
  83.  
    axisPointer: {
  84.  
    type: 'cross', //'line' 直线指示器'shadow' 阴影指示器'none' 无指示器'cross' 十字准星指示器。其实是种简写,表示启用两个正交的轴的 axisPointer。
  85.  
    axis: 'auto', //指示器的坐标轴。可以是 'x', 'y', 'radius', 'angle'
  86.  
    snap: true, //坐标轴指示器是否自动吸附到点上。默认自动判断。
  87.  
    //坐标轴指示器的文本标签
  88.  
    label: {
  89.  
    show: true,
  90.  
    precision: 'auto', //文本标签中数值的小数点精度
  91.  
    formatter: '{value} 万', //文本标签文字的格式化器。
  92.  
    margin: 3,
  93.  
    },
  94.  
    //'line' 时有效。
  95.  
    lineStyle: {},
  96.  
    //axisPointer.type'shadow' 时有效。
  97.  
    shadowStyle: {},
  98.  
    //axisPointer.type'cross' 时有效。
  99.  
    crossStyle: {
  100.  
    // 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置
  101.  
    color: {
  102.  
    type: 'linear',
  103.  
    x: 0.5,
  104.  
    y: 0.5,
  105.  
    x2: 0,
  106.  
    y2: 1,
  107.  
    colorStops: [{
  108.  
    offset: 0,
  109.  
    color: 'red' // 0% 处的颜色
  110.  
    }, {
  111.  
    offset: 1,
  112.  
    color: 'blue' // 100% 处的颜色
  113.  
    }],
  114.  
    global: false // 缺省为 false
  115.  
    },
  116.  
    // 纹理填充
  117.  
    // color: {
  118.  
    // image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串
  119.  
    // repeat: 'repeat' // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat'
  120.  
    // }
  121.  
     
  122.  
    },
  123.  
    },
  124.  
    showContent: true, //是否显示提示框浮层
  125.  
    alwaysShowContent: true, //是否永远显示提示框内容,默认情况下在移出可触发提示框区域后 一定时间 后隐藏,设置为 true 可以保证一直显示提示框内容。
  126.  
    triggerOn: 'mousemove|click', //提示框触发的条件'mousemove'/'click'/'mousemove|click'/none
  127.  
    showDelay: 0, //浮层显示的延迟,
  128.  
    hideDelay: 100, //浮层显示的延迟,,
  129.  
    enterable: false, //鼠标是否可进入提示框浮层中,默认为false
  130.  
    renderMode: 'html', //浮层的渲染模式//'richText'//'html'
  131.  
    confine: false, //是否将 tooltip 框限制在图表的区域内。
  132.  
    transitionDuration: 0.4, //提示框浮层的移动动画过渡时间
  133.  
    //formatter: '{a}:{c}', //提示框浮层内容格式器
  134.  
    // 折线(区域)图、柱状(条形)图、K线图 : {a}(系列名称),{b}(类目值),{c}(数值), {d}(无)
  135.  
    // 散点图(气泡)图 : {a}(系列名称),{b}(数据名称),{c}(数值数组), {d}(无)
  136.  
    // 地图 : {a}(系列名称),{b}(区域名称),{c}(合并数值), {d}(无)
  137.  
    // 饼图、仪表盘、漏斗图: {a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比)
  138.  
    backgroundColor: 'rgba(50,50,50,0.7)',
  139.  
    borderColor: '#333',
  140.  
    borderWidth: 0,
  141.  
    padding: 5,
  142.  
    // textStyle: { ... },
  143.  
     
  144.  
     
  145.  
    },
  146.  
     
  147.  
    //图例组件。
  148.  
    legend: {
  149.  
    type: 'plain', //'plain':普通图例。缺省就是普通图例。'scroll':可滚动翻页的图例。当图例数量较多时可以使用。
  150.  
    show: true, //是否显示标题组件true/false
  151.  
    left: 'left', //图例组件离容器左侧的距离。可选值'auto''left', 'center', 'right'
  152.  
    top: '20',
  153.  
    right: 'auto',
  154.  
    bottom: 'auto',
  155.  
    width: 'auto',
  156.  
    height: 'auto',
  157.  
    orient: 'horizontal', //图例列表的布局朝向。'horizontal'/'vertical'
  158.  
    align: 'auto', //图例标记和文本的对齐。默认自动,可选值'auto''left''right'
  159.  
    itemGap: 10, //图例每项之间的间隔。横向布局时为水平间隔,纵向布局时为纵向间隔。默认10
  160.  
    itemWidth: 25, //图例标记的图形宽度,默认25
  161.  
    itemHeight: 10, //图例标记的图形高度。默认14
  162.  
    selectedMode: true, //图例选择的模式,控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择,可以设成 false 关闭。
  163.  
    //可以设成 'single' 或者 'multiple' 使用单选或者多选模式。
  164.  
    inactiveColor: 'red', //图例关闭时的颜色。
  165.  
    //图例选中状态表
  166.  
    // selected: {
  167.  
    // '意向': true,
  168.  
    // // 不选中'系列2'
  169.  
    // '预购': false
  170.  
    // // 不选中
  171.  
    // },
  172.  
    // formatter: function () {
  173.  
    // textStyle: {
  174.  
    // color:'auto'
  175.  
    // }
  176.  
    // },
  177.  
    //主标题样式
  178.  
    textStyle: {
  179.  
    color: '#333',
  180.  
    fontStyle: 'normal',
  181.  
    fontWeight: 'normal',
  182.  
    fontFamily: 'sans-serif',
  183.  
    fontSize: 12,
  184.  
    },
  185.  
    //icon: 'roundRect', //ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'或者'image://http://xxx.xxx.xxx/a/b.png'
  186.  
    backgroundColor: 'rgba(0,0,0,0.2)', //背景色
  187.  
    borderColor: '#ccc',
  188.  
    borderWidth: 1,
  189.  
    borderRadius: 5,
  190.  
    // shadowBlur: ...,
  191.  
    // shadowColor: ...,
  192.  
    // shadowOffsetX: 0,
  193.  
    // shadowOffsetY: 0,
  194.  
    data: [{
  195.  
    name: '意向',
  196.  
    //icon: 'arrow',//ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'或者'image://http://xxx.xxx.xxx/a/b.png'
  197.  
    // textStyle: {文本样式},
  198.  
    textStyle: {
  199.  
    color: 'red' // 图例文字颜色
  200.  
    }
  201.  
     
  202.  
    }, {
  203.  
    name: '预购',
  204.  
    //icon: 'rect',//ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'或者'image://http://xxx.xxx.xxx/a/b.png'
  205.  
    // textStyle: {文本样式},
  206.  
     
  207.  
    }, {
  208.  
    name: '成交',
  209.  
    //icon: 'rect',//ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'或者'image://http://xxx.xxx.xxx/a/b.png'
  210.  
    // textStyle: {文本样式},
  211.  
     
  212.  
    }]
  213.  
    // data: ['意向', '预购', '成交']
  214.  
    },
  215.  
    //直角坐标系内绘图网格
  216.  
    grid: {
  217.  
    show: true, //是否显示直角坐标系网格。
  218.  
    left: '10%',
  219.  
    top: 60,
  220.  
    right: '10%',
  221.  
    bottom: 60,
  222.  
    width: 'auto',
  223.  
    height: 'auto',
  224.  
    containLabel: false,
  225.  
    backgroundColor: 'transparent',
  226.  
    borderColor: '#ccc',
  227.  
    borderWidth: 1,
  228.  
    },
  229.  
    //工具栏。内置有导出图片,数据视图,动态类型切换,数据区域缩放,重置五个工具。
  230.  
    toolbox: {
  231.  
    show: true,
  232.  
    orient: 'horizontal', //'horizontal'或者'vertical'
  233.  
    itemSize: 15, //工具栏 icon 的大小。
  234.  
    itemGap: 10, //工具栏 icon 每项之间的间隔。横向布局时为水平间隔,纵向布局时为纵向间隔。
  235.  
    showTitle: true, //是否在鼠标 hover 的时候显示每个工具 icon 的标题。
  236.  
    z: 10,
  237.  
    //各工具配置项
  238.  
    feature: {
  239.  
    // 动态类型切换
  240.  
    magicType: {
  241.  
    show: true,
  242.  
    type: ['stack', 'tiled', 'bar', 'line'], //启用的动态类型,包括'line'(切换为折线图), 'bar'(切换为柱状图), 'stack'(切换为堆叠模式), 'tiled'(切换为平铺模式)。
  243.  
    title: {
  244.  
    line: '切换为折线图',
  245.  
    bar: '切换为柱状图',
  246.  
    stack: '切换为堆叠',
  247.  
    tiled: '切换为平铺',
  248.  
    },
  249.  
    // 图标,图标样式同上
  250.  
    // icon: {line: '',bar: '',stack: '',tiled: '',},
  251.  
    },
  252.  
    // 保存图片
  253.  
    saveAsImage: {
  254.  
    show: true,
  255.  
    type: 'png', //保存的图片格式。支持 'png''jpeg'
  256.  
    name: '销售报表', //保存的文件名称
  257.  
    backgroundColor: '#fff', //保存的文件背景
  258.  
    excludeComponents: ['toolbox'], //保存为图片时忽略的组件列表,默认忽略工具栏。
  259.  
    show: true,
  260.  
    title: '保存为图片',
  261.  
    pixelRatio: 2, //保存图片的分辨率比例,默认跟容器相同大小,如果需要保存更高分辨率的,可以设置为大于 1 的值,例如 2
  262.  
    // icon: 'image://http://xxx.xxx.xxx/a/b.png',
  263.  
    // 图标样式
  264.  
    // iconStyle: {
  265.  
    // //color: 'red',
  266.  
    // // 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置
  267.  
    // color: {
  268.  
    // type: 'linear',
  269.  
    // x: 0,
  270.  
    // y: 0,
  271.  
    // x2: 0,
  272.  
    // y2: 1,
  273.  
    // colorStops: [{
  274.  
    // offset: 0,
  275.  
    // color: 'red' // 0% 处的颜色
  276.  
    // }, {
  277.  
    // offset: 1,
  278.  
    // color: 'blue' // 100% 处的颜色
  279.  
    // }],
  280.  
    // global: false // 缺省为 false
  281.  
    // },
  282.  
    // borderColor: '#666',
  283.  
    // borderWidth: 1,
  284.  
    // borderType: 'solid',
  285.  
    // opacity: 0.5,
  286.  
    // },
  287.  
    },
  288.  
    // 还原刷新
  289.  
    restore: {
  290.  
    show: true,
  291.  
    title: '还原',
  292.  
    },
  293.  
    // 数据区域缩放。目前只支持直角坐标系的缩放。
  294.  
    // dataZoom: { show: true,}
  295.  
    },
  296.  
     
  297.  
    },
  298.  
    // x轴
  299.  
    xAxis: {
  300.  
    show: true,
  301.  
    name: 'x轴', //坐标轴名称。
  302.  
    nameLocation: 'end', //坐标轴名称显示位置。'start''middle' 或者 'center''end'
  303.  
    // nameTextStyle: {...},//坐标轴名称的样式。
  304.  
    nameGap: 15, //坐标轴名称与轴线之间的距离。默认值15
  305.  
    gridIndex: 0, //x 轴所在的 grid 的索引,默认位于第一个 grid。
  306.  
    nameRotate: null, //坐标轴名字旋转,角度值。
  307.  
    inverse: false, //是否是反向坐标轴
  308.  
    type: 'category', //类型''value' 数值轴,适用于连续数据。'category' 类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据。'time' 时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。'log' 对数轴。适用于对数数据。
  309.  
    boundaryGap: ['2%', '2%'], //坐标轴两边留白策略,类目轴和非类目轴的设置和表现不一样。true 和 false
  310.  
    //value' 数值轴,适用于连续数据。
  311.  
    //'category' 类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据。
  312.  
    //'time' 时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。
  313.  
    //'log' 对数轴。适用于对数数据。
  314.  
    boundaryGap: false, //坐标轴两边留白策略,类目轴和非类目轴的设置和表现不一样。
  315.  
    position: 'bottom', //认 grid 中的第一个 x 轴在 grid 的下方('bottom'),第二个 x 轴视第一个 x 轴的位置放在另一侧。'top'/'bottom'
  316.  
    offset: 10, //X 轴相对于默认位置的偏移,在相同的 position 上有多个 X 轴的时候有用。
  317.  
    //minInterval: 0, //自动计算的坐标轴最小间隔大小。
  318.  
    //maxInterval: 3600 * 24 * 1000, //自动计算的坐标轴最大间隔大小。在时间轴((type: 'time'))可以设置成 3600 * 24 * 1000 保证坐标轴分割刻度最大为一天。
  319.  
    // 坐标轴相关设置
  320.  
    axisLine: {
  321.  
    show: true, //是否显示坐标轴轴线。
  322.  
    onZero: true, //X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上,只有在另一个轴为数值轴且包含 0 刻度时有效。
  323.  
    symbol: ['none', 'arrow'], //轴线两边的箭头。可以是字符串,表示两端使用同样的箭头;或者长度为 2 的字符串数组,分别表示两端的箭头。默认不显示箭头,即 'none'。两端都显示箭头可以设置为 'arrow',只在末端显示箭头可以设置为 ['none', 'arrow']。
  324.  
    symbolSize: [10, 15], //轴线两边的箭头的大小,第一个数字表示宽度(垂直坐标轴方向),第二个数字表示高度(平行坐标轴方向)。
  325.  
    symbolOffset: [0, 0], //轴线两边的箭头的偏移,如果是数组,第一个数字表示起始箭头的偏移,第二个数字表示末端箭头的偏移;如果是数字,表示这两个箭头使用同样的偏移。
  326.  
     
  327.  
    },
  328.  
    // 坐标轴线样式
  329.  
    lineStyle: {
  330.  
    color: '#333',
  331.  
    width: 1,
  332.  
    type: 'solid',
  333.  
    },
  334.  
    //坐标轴刻度相关设置。
  335.  
    axisTick: {
  336.  
    show: true,
  337.  
    alignWithLabel: true, //类目轴中在 boundaryGap 为 true 的时候有效,可以保证刻度线和标签对齐
  338.  
    interval: 'auto', //坐标轴刻度的显示间隔,
  339.  
    inside: false, //坐标轴刻度是否朝内,默认朝外。
  340.  
    length: 5, //坐标轴刻度的长度。
  341.  
    // 样式
  342.  
    lineStyle: {
  343.  
    color: 'red',
  344.  
    width: 1,
  345.  
    type: 'solid',
  346.  
    },
  347.  
     
  348.  
    },
  349.  
    //坐标轴刻度标签的相关设置。
  350.  
    axisLabel: {
  351.  
     
  352.  
    show: true,
  353.  
    interval: 'auto', //坐标轴刻度标签的显示间隔,在类目轴中有效。
  354.  
    inside: false, //[ default: false ]刻度标签是否朝内,默认朝外。
  355.  
    rotate: 0, //刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。旋转的角度从 -90 度到 90 度。
  356.  
    margin: 8, //刻度标签与轴线之间的距离。
  357.  
    //formatter:'{value} kg',//刻度标签的内容格式器,支持字符串模板和回调函数两种形式。
  358.  
    showMinLabel: null,
  359.  
    showMaxLabel: null,
  360.  
    color: '#333',
  361.  
    fontStyle: 'normal',
  362.  
    // fontWeight: normal,
  363.  
    // fontFamily: 'sans-serif',
  364.  
    // fontSize: 12,
  365.  
    align: 'center', //文字水平对齐方式,默认自动。'left'或者'center'或者'right'
  366.  
    verticalAlign: 'middle', //文字垂直对齐方式,默认自动。'top'或者'middle'或者'bottom'
  367.  
     
  368.  
    },
  369.  
    //坐标轴在 grid 区域中的分隔线。
  370.  
    splitLine: {
  371.  
    show: true,
  372.  
    interval: 0, //设置为 1,表示『隔一个标签显示一个标签』,如果值为 2,表示隔两个标签显示一个标签,以此类推。
  373.  
    // 样式
  374.  
    lineStyle: {
  375.  
    color: ['#aaa', '#ddd'], //间隔颜色
  376.  
    width: 1,
  377.  
    type: 'solid', //'solid''dashed''dotted'
  378.  
    // shadowBlur: ...,
  379.  
    // shadowColor: ...,
  380.  
    // shadowOffsetX: 0,
  381.  
    // shadowOffsetY: 0,
  382.  
    opacity: 1,
  383.  
    },
  384.  
     
  385.  
     
  386.  
    },
  387.  
    //坐标轴在 grid 区域中的分隔区域,默认不显示。
  388.  
    splitArea: {
  389.  
    interval: 'auto', 设置为 1,表示『隔一个标签显示一个标签』,如果值为 2,表示隔两个标签显示一个标签,以此类推。
  390.  
    show: true,
  391.  
    areaStyle: {
  392.  
    color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'], //[ default: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'] ]
  393.  
    // shadowBlur: ...,
  394.  
    // shadowColor: ...,
  395.  
    // shadowOffsetX: 0,
  396.  
    // shadowOffsetY: 0,
  397.  
    opacity: 1,
  398.  
    },
  399.  
    },
  400.  
    // 所有类目名称列表
  401.  
    //data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  402.  
    // 每一项也可以是具体的配置项,此时取配置项中的 `value` 为类目名
  403.  
    data: [{
  404.  
    value: '周一',
  405.  
    // 突出周一
  406.  
    textStyle: {
  407.  
    fontSize: 20,
  408.  
    color: 'red'
  409.  
    }
  410.  
    }, '周二', '周三', '周四', '周五', '周六', '周日'],
  411.  
    //指示器
  412.  
    axisPointer: {
  413.  
    show: true,
  414.  
    type: 'line', //'line' 直线指示器'shadow' 阴影指示器'none' 无指示器
  415.  
    snap: true, //坐标轴指示器是否自动吸附到点上。默认自动判断。
  416.  
    //坐标轴指示器的文本标签。
  417.  
    label: {
  418.  
    show: true,
  419.  
    precision: 'auto',
  420.  
    formatter: '{value} ', //显示形式
  421.  
    margin: 3,
  422.  
    color: '#fff',
  423.  
    fontStyle: 'normal',
  424.  
    fontFamily: 'sans-serif',
  425.  
    fontSize: 10,
  426.  
    padding: [5, 7, 5, 7],
  427.  
    backgroundColor: 'auto',
  428.  
     
  429.  
    },
  430.  
    lineStyle: {
  431.  
    color: '#555',
  432.  
    width: 1,
  433.  
    type: 'dashed', //'solid''dashed''dotted'
  434.  
    },
  435.  
    //axisPointer.type'shadow' 时有效。
  436.  
    shadowStyle: {
  437.  
    color: 'rgba(150,150,150,0.3)', //填充颜色
  438.  
    },
  439.  
    triggerTooltip: true, //是否触发 tooltip。如果不想触发 tooltip 可以关
  440.  
    value: 1, //当前的 value。在使用 axisPointer.handle 时,可以设置此值进行初始值设定,从而决定 axisPointer 的初始位置。
  441.  
    status: 'show', //当前的状态,可取值为 'show''hide'
  442.  
    //拖拽手柄,适用于触屏的环境。
  443.  
    // handle: {
  444.  
    // show: true,
  445.  
    // color: '#004E52',
  446.  
    // // show: true,
  447.  
    // // icon: 'image://http://xxx.xxx.xxx/a/b.png',
  448.  
    // size: 25,
  449.  
    // margin: -50,//手柄与轴的距离
  450.  
    // // color: '#333',
  451.  
    // // throttle: 40,//手柄拖拽时触发视图更新周期,单位毫秒,调大这个数值可以改善性能,但是降低体验。
  452.  
    // },
  453.  
     
  454.  
     
  455.  
    }
  456.  
     
  457.  
    },
  458.  
    // 同x轴
  459.  
    yAxis: {
  460.  
    type: 'value'
  461.  
    },
  462.  
    //视觉映射组件
  463.  
    // visualMap: {},
  464.  
     
  465.  
    //系列列表。每个系列通过 type 决定自己的图表类型
  466.  
    series: [{
  467.  
    name: '成交',
  468.  
    type: 'line', //line,bar,pie,scatter,effectScatter带有涟漪特效动画的散点(气泡)图,map,lines,custom自定义,
  469.  
    smooth: true,
  470.  
    symbol: 'emptyCircle', //标记的图型ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow''image://url'
  471.  
    symbolSize: 10,
  472.  
    symbolRotate: 50, //标记的大小,默认4
  473.  
    symbolOffset: [0, 0], //标记相对于原本位置的偏移
  474.  
    showSymbol: true, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示。
  475.  
    showAllSymbol: false, //标志图形默认只有主轴显示(随主轴标签间隔隐藏策略)
  476.  
    hoverAnimation: true, //是否开启 hover 在拐点标志上的提示动画效果。
  477.  
    legendHoverLink: true, //是否启用图例 hover 时的联动高亮。
  478.  
    cursor: 'pointer', //鼠标悬浮时在图形元素上时鼠标的样式是什么。同 CSS 的 cursor
  479.  
    connectNulls: false, //是否连接空数据
  480.  
    stack: null, //,同个类目轴上系列配置相同的stack值后,后一个系列的值会在前一个系列的值上相加
  481.  
    step: false, //是否是阶梯线图。可以设置为 true 显示成阶梯线图,也支持设置成 'start', 'middle', 'end' 分别配置在当前点,当前点与下个点的中间点,下个点拐弯。
  482.  
    //图形上的文本标签,可用于说明图形的一些数据信息
  483.  
    label: {
  484.  
    //静态的时候显示的默认样式
  485.  
    normal: {
  486.  
    show: true,
  487.  
    position: 'top', //标签的位置。'top''left''right''bottom''inside''insideLeft''insideRight''insideTop''insideBottom''insideTopLeft''insideBottomLeft''insideTopRight''insideBottomRight'
  488.  
    distance: 5, //距离图形元素的距离
  489.  
    rotate: 5, //标签旋转
  490.  
    offset: [10, -10], //是否对文字进行偏移
  491.  
    formatter: '{b}: {c}', //标签内容格式器,模板变量有 {a}、{b}、{c},分别表示系列名,数据名,数据值。name,xname,value
  492.  
    color: '#333',
  493.  
    // fontStyle: 'normal',
  494.  
    // fontWeight: normal,
  495.  
    // fontFamily: 'sans-serif',
  496.  
    // fontSize: 12,
  497.  
    // align: ...,
  498.  
    // verticalAlign: ...,
  499.  
    // lineHeight: ...,
  500.  
    // backgroundColor: 'transparent',
  501.  
    // borderColor: 'transparent',
  502.  
    // borderWidth: 0,
  503.  
    // borderRadius: 0,
  504.  
    // padding: 0,
  505.  
    formatter: [
  506.  
    '{a|{a}}', //a样式
  507.  
    '{b|{b}:{c}}', //b样式
  508.  
    ].join('\n'),
  509.  
     
  510.  
    rich: {
  511.  
    a: {
  512.  
    color: 'red',
  513.  
    lineHeight: 10
  514.  
    },
  515.  
    b: {
  516.  
    backgroundColor: {
  517.  
    // image: 'xxx/xxx.jpg'
  518.  
    },
  519.  
    height: 40
  520.  
    },
  521.  
    }
  522.  
    },
  523.  
    emphasis: { //鼠标移入动态的时候显示的默认样式
  524.  
    show: true,
  525.  
    rotate: 360, //标签旋转
  526.  
    offset: [10, -10], //是否对文字进行偏移
  527.  
    formatter: '{b}: {c}', //标签内容格式器,模板变量有 {a}、{b}、{c},分别表示系列名,数据名,数据值。name,xname,value
  528.  
    color: 'green',
  529.  
     
  530.  
    }
  531.  
    },
  532.  
    //折线拐点标志的样式。
  533.  
    itemStyle: {
  534.  
    normal: {
  535.  
    // color: 'green',
  536.  
    borderColor: '#000',
  537.  
    borderWidth: 1,
  538.  
    borderType: 'solid'
  539.  
    },
  540.  
    emphasis: {
  541.  
    // color: 'red',
  542.  
    borderColor: 'green',
  543.  
    borderWidth: 2,
  544.  
    borderType: 'solid'
  545.  
    },
  546.  
     
  547.  
    },
  548.  
    //线条样式。
  549.  
    lineStyle: {
  550.  
    // 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变
  551.  
    //color: 'red',
  552.  
    color: {
  553.  
    type: 'linear',
  554.  
    x: 0.5,
  555.  
    y: 0,
  556.  
    x2: 0,
  557.  
    y2: 1,
  558.  
    colorStops: [{
  559.  
    offset: 0,
  560.  
    color: 'red' // 0% 处的颜色
  561.  
    }, {
  562.  
    offset: 1,
  563.  
    color: 'blue' // 100% 处的颜色
  564.  
    }],
  565.  
    globalCoord: false // 缺省为 false
  566.  
    },
  567.  
    width: 2,
  568.  
    type: 'solid',
  569.  
    },
  570.  
    //区域填充样式
  571.  
    areaStyle: {
  572.  
    normal: {
  573.  
    color: '#000',
  574.  
    opacity: 0.3,
  575.  
    },
  576.  
    smooth: false, //是否平滑曲线显示。
  577.  
     
  578.  
    },
  579.  
    data: [10, 12, 21, 54, 260, 830, 710],
  580.  
    // 图表标注。
  581.  
    markPoint: {
  582.  
    symbol: 'roundRect', //标线两端的标记类型
  583.  
    symbolSize: 30,
  584.  
    symbolRotate: 0,
  585.  
    symbolOffset: [0, 0],
  586.  
    silent: false, //图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。
  587.  
     
  588.  
    data: [{
  589.  
    name: '最大值',
  590.  
    type: 'max', //'min' 最大值。'max' 最大值。'average' 平均值。
  591.  
    label: {
  592.  
    show: true,
  593.  
    position: 'inside',
  594.  
    distance: 5,
  595.  
    formatter: '{b}: {@score}',
  596.  
    },
  597.  
     
  598.  
    }, {
  599.  
    name: '最小值',
  600.  
    type: 'min'
  601.  
    }, {
  602.  
    name: '平均值',
  603.  
    type: 'average'
  604.  
    }]
  605.  
    },
  606.  
    //图表标线。
  607.  
    markLine: {
  608.  
    silent: false,
  609.  
    symbol: 'pin',
  610.  
    symbolSize: 12,
  611.  
    precision: 2,
  612.  
    //标线文本
  613.  
    label: {
  614.  
    normal: {
  615.  
    show: true,
  616.  
    color: '#333',
  617.  
    position: 'end',
  618.  
    // offset: [30,40],
  619.  
    padding: [5, 10],
  620.  
    formatter: '平均值',
  621.  
    },
  622.  
    },
  623.  
    //标线样式
  624.  
    lineStyle: {
  625.  
    normal: {
  626.  
    color: 'red',
  627.  
    width: 1,
  628.  
    type: 'solid',
  629.  
     
  630.  
    },
  631.  
    },
  632.  
    data: [{
  633.  
    name: '平均值',
  634.  
    type: 'average'
  635.  
    }]
  636.  
    },
  637.  
    //图表标域
  638.  
    markArea: {
  639.  
    data: [
  640.  
    [{
  641.  
    yAxis: '1200'
  642.  
    }, {
  643.  
    yAxis: '1500'
  644.  
    }]
  645.  
    ]
  646.  
    },
  647.  
    },
  648.  
    {
  649.  
    name: '预购',
  650.  
    type: 'line',
  651.  
    smooth: true,
  652.  
    data: [30, 182, 434, 791, 390, 30, 10]
  653.  
    },
  654.  
    {
  655.  
    name: '意向',
  656.  
    type: 'line',
  657.  
    smooth: true,
  658.  
    data: [1320, 1132, 601, 234, 120, 90, 20]
  659.  
    }
  660.  
    ]
  661.  
    };
  662.  
     
  663.  
    // 使用刚指定的配置项和数据显示图表。
  664.  
    myCharte.setOption(option);
  665.  
    </script>
  666.  
     
  667.  
    </html>
学新通

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanhiahiii
系列文章
更多 icon
同类精品
更多 icon
继续加载