百度echarts折線圖美化 填充顏色，電波～，分類圓點圓點，填充
<!-- 為ECharts準備一個具備大小（寬高）的Dom --> <div id="main"></div> <!-- 引入 ECharts 檔案 --> <script src="plug-in/eCharts/echarts.js"></script> <script type="text/javascript"> // 基於準備好的dom，初始化echarts例項 var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和資料 var option = { title: { text: '病歷匯入情況', left:'80px' }, color: ['#FFA200', '#0ACAE2', '#FF3E43', '#32FF00'],//圓點顏色 tooltip: { trigger: 'axis' }, legend: { data:[ { name:'手動錄入', itemHeight:9,//改變圓圈大小 icon: 'circle'//設定為圓點 }, { name:'自動錄入', itemHeight:9,//改變圓圈大小 icon: 'circle' }, { name:'待稽核', itemHeight:9,//改變圓圈大小 icon: 'circle' }, { name:'稽核通過', itemHeight:9,//改變圓圈大小 icon: 'circle' } ] }, xAxis: { boundaryGap: false, data: ["2018-11-1", "2018-11-2", "2018-11-3", "2018-11-4", "2018-11-5", "2018-11-6"] }, yAxis: {}, series: [{ name: '手動錄入', type: 'line',//線型 smooth:0.3,//波浪 symbol: 'none',//去掉折點形狀 itemStyle : { normal : { lineStyle:{ width:0//線條寬度設定為0 } } }, areaStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#FFA54F'//線條填充顏色 }]) } }, data: [100, 20, 37, 50, 87, 10] },{ name: '自動錄入', type: 'line', smooth:0.3, symbol: 'none', itemStyle : { normal : { lineStyle:{ width:0 } } }, areaStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#40E0D0' }]) } }, data: [6, 46, 87, 34, 67, 23] },{ name: '待稽核', type: 'line', smooth:0.3, symbol: 'none', itemStyle : { normal : { lineStyle:{ width:0 } } }, areaStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#FF4040' }]) } }, data: [7, 97, 39, 12, 89, 24] },{ name: '稽核通過', type: 'line', smooth:0.3, symbol: 'none', itemStyle : { normal : { lineStyle:{ width:0 } } }, areaStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#7FFF00' }]) } }, data: [8, 56, 40, 100, 13, 45] }] };
// 使用剛指定的配置項和資料顯示圖表。 myChart.setOption(option); </script>
歡迎━(*｀∀´*)ノ亻!讚賞
