echarts在一个画布实现多条折线

<style>
#chart1{
   height: 300px;
}
</style>

 

<div class="row">
  <div class="col-md-6">
        <form class="form-horizontal">
            <div class="form-group">
                <label class="col-sm-3 control-label">日期</label>
                <div class="col-sm-3">
                    <input type="text" id="mytime" class="form-control"
                        readonly="readonly"
                        onFocus="WdatePicker({isShowClear:false,dateFmt:'yyyy-mm-dd'})">
                </div>
                <button class="btn btn-mint" type="button" οnclick="searchYB();">
                    <i class="glyphicon glyphicon-search"></i> 搜索
                </button>
            </div>
        </form>
        <div id="chart1"></div>
  </div>
</div>
<script src="#(ctx)/common/plugins/echart/echarts.min.js"></script>

<script src="#(ctx)/common/plugins/My97DatePicker/WdatePicker.js"></script>

 

<script type="text/javascript">
var myChart1 = echarts.init(document.getElementById('chart1'));

var option1 = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: '#57617B'
                }
            }
        },
        legend: {
            icon: 'rect',
            itemWidth: 14,
            itemHeight: 5,
            itemGap: 13,
            data: ['养老','医保'],
            right: '4%',
            textStyle: {
                fontSize: 12,
                color: '#57617B'
            }
        },
        grid: {
            left: '8%',
            right: '8%',
            top:'12%',
            bottom: '30%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data:['0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23'],
                axisTick: {
                    alignWithLabel: true
                },
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '单位:人'
            }
        ],
        series: [
            {
                name: '养老',
                type: 'line',
                itemStyle : {
                    normal : {
                        color:'#00FF00',  //设置折点的颜色
                        lineStyle:{
                            color:'#00FF00'//设置折线的颜色
                        }
                    }
                },
                data: ['1','5','10','3','6','8','35','57','2','1','90','75','42','25','67','89','0','0','1','2','3','4','5','6']
            },
            {
                name: '医保',
                type: 'line',
                data: ['1','5','10','3','100','8','35','57','2','1','0','75','42','25','67','100','0','0','1','2','3','4','5','6']
            }
        ]
    };
        
myChart1.setOption(option1);

</script>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

iamlzjoco

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值