echarts中如何自定义添加辅助线基准线？

钛元素 2018-12-11 10:27:48

我的图表，目前是这样：x轴日期，y轴金额或者销量。
需求：在月统计图表中，每个月要有“旬”的分隔，比如目前是1、 2、 3 ... 12 月份的日期，要在1-2月之间，有2根虚线，表示上中下旬（10天根），这个怎么做？网上很多例子都是y轴的。help！

html：



<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>业务部全年销售计划与实际销售情况比对图</title>

	<STYLE>

	<!--

		#main {

			text-align:center;

			height:97%;width:98%;

			border: 1px solid rgb(51, 82, 221);

			position:fixed;

			/*background: url(images/qq3.jpg) no-repeat;*/

			text-align:center;

			}

	//-->

	</STYLE>

	

	<script src="dist/echarts.min.js"></script>

</head>

<body>

	<div id="main"></div>

	<script language="javascript" type="text/javascript">

		var myChart = echarts.init(document.getElementById('main'));

		var option = {

				title: {

					text: '业务部全年销售计划与实际销售情况比对图'

				},

				tooltip : {

					trigger: 'axis'

				},

				legend: {

					data:['全年销售计划','实际销售情况']

				},

				toolbox: {

					show : true,

					feature : {

						mark : {show: true},

						dataView : {show: true, readOnly: false},

						magicType : {show: true, type: ['line', 'bar']},

						restore : {show: true},

						saveAsImage : {show: true}

					}

				},

				calculable : true,

				xAxis : [

					{

						type : 'category',

						boundaryGap : false,

						splitLine: {//分割线

							show: true,

							lineStyle:{color:'#cbcec6',

								type:'solid'

										}

									},

						data : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']

					}

				],

				yAxis : [

					{

						type : 'value'

					}

				],

				series : [

					{

						name:'全年销售计划',

						type:'line',

						tiled: '数量',

						itemStyle : { normal: {

							label : {show: true},

							lineStyle: {color: "#ff0099"}

							}

						},

						smooth: true,

						data:[120, 132, 101, 134, 90, 230, 210, 145,178,201,159,244]

					},

					{

						name:'实际销售情况',

						type:'line',

						tiled: '数量',

						itemStyle : { normal: {

							label : {show: true},

							lineStyle: {color: "#0033ff"}

							}

						},

						smooth: true,

						data:[220, 182, 191, 234, 290, 330, 310,134, 90, 230, 210, 145]

					}

				]

			};

			myChart.setOption(option);



	</script>

</body>

</html>