VUE项目中按需引入ECharts.js-蒲公英云

VUE项目中按需引入ECharts.js

安装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文件中

- 准备容器
- 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