echart折线图系列一：折线图基本配置

1. 引入echart插件
2. 页面上准备一个容器：<div id="box" style="height:400px;width: 800px;padding: 20px"></div>
3. 获取id，初始化：var myChart = echarts.init(document.getElementById("box"));
4. 定义基本配置信息

    var option = {
            // 标题
            title: {
                text: '',
                subtext: ''
            },
            tooltip: {
                trigger: 'axis'，
    　　           backgroundColor: 'rgba(36, 49, 67, 0.9)',
   
   
            },
            //图例名
            legend: {
                data:['']
            },
            grid: {
                left: '3%',   //图表距边框的距离
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            //工具框，可以选择
            toolbox: {
                feature: {
                    saveAsImage: {}
               }
            },
            //x轴信息样式
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: [''],
                //坐标轴颜色
                axisLine:{
                    lineStyle:{
                        color:'red'
                    }
               },
                //x轴文字旋转
                axisLabel:{
                    rotate:30,
                    interval:0
                },
            },
    
            yAxis : [
                {
                    type : 'value',
                    axisLabel : {
                        formatter: '{value} 人'
                    }
                }
            ],
            series: [
                //虚线
                {
                    name:'',
                    type:'line',
                    symbolSize:4,   //拐点圆的大小
                    color:['red'],  //折线条的颜色
                    data:[],
                    smooth:false,   //关键点，为true是不支持虚线的，实线就用true
                    itemStyle:{
                        normal:{
                            lineStyle:{
                                width:2,
                                type:'dotted'  //'dotted'虚线 'solid'实线
                            }
                        }
                    }
                },
                //实线
                {
                    name:'',
                    type:'line',
                    symbol:'circle',
                    symbolSize:4,
                    itemStyle:{
                        normal:{
                            color:'red',
                            borderColor:'red'  //拐点边框颜色
                        }
                    },
                    data:[]
                }  
            ]
        };

   
   

    

转载于:https://www.cnblogs.com/juicy-initial/p/9259262.html