VUE项目中按需引入ECharts.js

落日映苍穹つ 2021-12-24 08:13 1372阅读 0赞

#### 安装ECharts包 ####

> npm install echarts --save

#### 引入 ECharts ####

**按需引入**\--在main.js中引入

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文件中 ####

1.   *  准备容器
        
         *  <div id="myChart" :style="\{width: '420px', height: '900px'\}"></div>
     *  js代码
        
         *      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\#title][https_www.echartsjs.com_option.html_title]

转载于:https://www.cnblogs.com/Vayne-N/p/11059759.html

[https_www.echartsjs.com_option.html_title]: https://www.echartsjs.com/option.html#title