npm install echarts --savehtml
按需引入--在main.js中引入vue
1 // 引入 ECharts 主模塊 2 let echarts = require('echarts/lib/echarts'); 3 // 引入折線圖/柱狀圖等組件 4 require('echarts/lib/chart/line') 5 require('echarts/lib/chart/bar') 6 require('echarts/lib/chart/radar') 7 // 引入提示框和title組件,圖例 8 require('echarts/lib/component/tooltip') 9 require('echarts/lib/component/title') 10 require('echarts/lib/component/legend') 11 require('echarts/lib/component/legendScroll')//圖例滾動 12 //vue全局注入echarts 13 Vue.prototype.$echarts = echarts
1 import echarts from 'echarts' //引入echarts 2 Vue.prototype.$echarts = echarts //引入組件
準備容器npm
<div id="myChart" :style="{width: '420px', height: '900px'}"></div>echarts
js代碼ide
1 //初始化echart對象 2 let myChart = this.$echarts.init(document.getElementById('myChart')); 3 //配置echart 4 myChart.setOption({ 5 grid: {//總體位置 6 top: '40', 7 right: '8%', 8 left: '12%', 9 bottom: 36, 10 }, 11 backgroundColor: '#fff', 12 xAxis: { 13 type: 'value',//類型--數值軸 14 position: 'top',//位置 15 boundaryGap : 0,//座標軸兩側留白 16 offset: 8,//X軸偏移 17 axisLine : {//座標軸軸線 18 show: 0, 19 }, 20 axisTick : {show: 0},//座標軸刻度 21 splitLine : {show: 0},//座標軸grid區分割線 22 //data: ['10', '20', '30', '40'],//類目軸有效 23 }, 24 yAxis: { 25 type: 'category',//類型--類目軸 26 name:'期數', 27 nameLocation: 'start', //軸名位置 28 nameTextStyle: {//Y軸名稱 29 color: '#f00', 30 }, 31 offset: 8,//Y軸偏移 32 nameGap: 15,//軸名距離 33 inverse: 1,//反轉 34 boundaryGap : 0,//座標軸兩側留白 35 axisLine : {show: 0},//座標軸軸線 36 axisTick : {show: 0},//座標軸刻度 37 splitLine : {//座標軸grid區分割線 38 show: 1, 39 lineStyle:{ 40 color: '#dcdcdc' 41 } 42 }, 43 data: [1,2,3,4],//y軸刻度 44 }, 45 series: [{ 46 data: [23,24,25,26],//數據--將按照類目表依次排列 47 type: 'line',//折線圖 48 label: {//標籤 49 show: 1, 50 position: 'insideTopLeft', 51 distance: 12, 52 color: '#000', 53 fontSize: 14, 54 }, 55 itemStyle:{//標記拐點顏色 56 color: (param)=>{ 57 return function(param){....} 58 } 59 }, 60 symbol: 'circle',//標記-實心圓 61 symbolSize: 10,//標記-大小 62 lineStyle:{color:'#ccc',},//line樣式 63 }] 64 });
上面的js代碼可整合成函數,方便使用和重繪.重繪時,EChart會複用可用部分,使圖形進行變化.函數
ECharts官網 ui