VUE项目中按需引入ECharts.js

安装ECharts包

npm install echarts --save

引入 ECharts

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

// 引入 ECharts 主模块
let echarts = require('echarts/lib/echarts');
// 引入折线图/柱状图等组件
require('echarts/lib/chart/line')
require('echarts/lib/chart/bar')
require('echarts/lib/chart/radar')
// 引入提示框和title组件，图例
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
require('echarts/lib/component/legendScroll')//图例滚动
//vue全局注入echarts
Vue.prototype.$echarts = echarts

　　全局引入--main.js

import echarts from 'echarts' //引入echarts
Vue.prototype.$echarts = echarts //引入组件

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

1. • 准备容器

     • <div id="myChart" :style="{width: '420px', height: '900px'}"></div>

   • js代码

     • //初始化echart对象
       let myChart = this.$echarts.init(document.getElementById('myChart'));
       //配置echart
       myChart.setOption({
           grid: {//整体位置
               top: '40',
               right: '8%',
               left: '12%',
               bottom: 36,
           },
           backgroundColor: '#fff',
           xAxis: {
               type: 'value',//类型--数值轴
               position: 'top',//位置
               boundaryGap : 0,//坐标轴两侧留白
               offset: 8,//X轴偏移
               axisLine : {//坐标轴轴线
                   show: 0,
               },
               axisTick : {show: 0},//坐标轴刻度
               splitLine : {show: 0},//坐标轴grid区分割线
               //data: ['10', '20', '30', '40'],//类目轴有效
           },
           yAxis: {
               type: 'category',//类型--类目轴
               name:'期数',
               nameLocation: 'start', //轴名位置
               nameTextStyle: {//Y轴名称
                   color: '#f00',
               },
               offset: 8,//Y轴偏移
               nameGap: 15,//轴名距离
               inverse: 1,//反转
               boundaryGap : 0,//坐标轴两侧留白
               axisLine : {show: 0},//坐标轴轴线
               axisTick : {show: 0},//坐标轴刻度
               splitLine : {//坐标轴grid区分割线
                   show: 1,
                   lineStyle:{
                       color: '#dcdcdc'
                   }
               },
               data: [1,2,3,4],//y轴刻度
           },
           series: [{
               data: [23,24,25,26],//数据--将按照类目表依次排列
               type: 'line',//折线图
               label: {//标签
                   show: 1,
                   position: 'insideTopLeft',
                   distance: 12,
                   color: '#000',
                   fontSize: 14,
               },
               itemStyle:{//标记拐点颜色
                   color: (param)=>{
                       return function(param){....}
                   }
               },
               symbol: 'circle',//标记-实心圆
               symbolSize: 10,//标记-大小
               lineStyle:{color:'#ccc',},//line样式
           }]
       });

        

   • 上面的js代码可整合成函数,方便使用和重绘.重绘时,EChart会复用可用部分,使图形进行变化.

   • ECharts官网 https://www.echartsjs.com/option.html#title