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:[] } ] };

     


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM