echarts函数封装

折线图(多条)

function lineChart(id,echarts,xdata,ydata,title,legend){
        let dom = document.getElementById(id);
        let myChart = echarts.init(dom);
        let option = null;
        option = {
            color:['#FF00ED', '#9311FF', '#00B6F5','#FFB10D','#00FF00'],
            title: {
                text: title,
                top:16,left:12,
                textStyle:{
                    fontSize:14
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器,坐标轴触发有效
                    type: 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
                }
            },
            legend: {
                data: legend, top:30,right:20,
                bottom:"auto",
                itemWidth:12,
                itemHeight:12,
                width:"60%",
                textStyle:{
                    color:"#333",
                    fontSize:12
                }
            },
            grid: {
                left: '30',
                right: '30',
                bottom: '20',
                top: '100',
                containLabel: true
            },
            toolbox: {
                // feature: {
                //     saveAsImage: {}
                // }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                axisLine:{
                    lineStyle:{
                        color:{
                            colorStops: [{
                                offset: 0, color: '#43BAD8'
                            }, {
                                offset: 1, color: '#43BAD8'
                            }],
                        }
                    }
                },
                data: xdata
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    show: false
                },
                axisTick: {
                    lineStyle: {color: '#fff'}//坐标轴刻度
                },
                splitLine: {
                    lineStyle: {color: '#BDE5F0', type : '
  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值