VUE項目中按需引入ECharts.js

安裝ECharts包

npm install echarts --savehtml

引入 ECharts

  按需引入--在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

  全局引入--main.js

1 import echarts from 'echarts' //引入echarts
2 Vue.prototype.$echarts = echarts //引入組件

使用它----在xx.vue文件中

    • 準備容器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官網 https://www.echartsjs.com/option.html#titleui

相關文章
相關標籤/搜索