1.npm下载然后在单页面中引入。

import * as echarts from 'echarts'

2.在html中添加div标签加上id，并添加宽度和高度。

<div id="echart" style=" width: 100%;height: 300px"></div>

3.添加事件创建echarts。

  this.$nextTick(() => {
        let myChart = echarts.init(document.getElementById('topupEchart'))
        let option = {
        dataZoom: [
         {
         type: 'inside', //1平移 缩放
         throttle: '50', //设置触发视图刷新的频率。单位为毫秒（ms）。
         minValueSpan: 6, //用于限制窗口大小的最小值,在类目轴上可以设置为 5 表示 5 个类目
         start: 1, //数据窗口范围的起始百分比 范围是：0 ~ 100。表示 0% ~ 100%。
         end: 50, //数据窗口范围的结束百分比。范围是：0 ~ 100。
         zoomLock: true //如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
         }
        ],
        // 折线图的位置
        grid: {
           left: '15%',
           top: '30%'
        },
        xAxis: {
           type: 'category',
           // 底部x轴数据
           data: ['1','2','3','4','5','6'],
           triggerEvent: true,
           axisLabel: {
           interval: 0
           }
        },
        axisLabel: {
           interval: 0, //设置横坐标为斜
           rotate: 30, //文字倾斜角度
           formatter: function (value) {
           if (value.length > 10) {
              value = value.substring(0, 9) + '..'
           }
           return value
           },
           textStyle: {
             color: '#666',
             fontSize: '12'
           }
           },
           yAxis: {
             type: 'value'
         },
         tooltip: {
            // 设置鼠标悬浮提示框显示 X和Y 轴数据
            trigger: 'axis',
            backgroundColor: 'rgba(32, 33, 36,.7)',
            borderColor: 'rgba(32, 33, 36,0.20)',
            borderWidth: 1,
            textStyle: {
            // 文字提示样式
            color: '#fff',
            fontSize: '12'
         },
            //设置层级
             extraCssText: 'z-index:4;'
         },
          series: [
             {
               name: '余额',
               data: subsidy,
               type: 'line',
               label: {
               show: true,
               // 文字居下显示
               position: 'bottom',
               // 文字大小
               fontSize: 10,
               // 线条点的颜色
               itemStyle: {
                color: '#3390ff'
               },
               // 线条颜色
               lineStyle: {
                color: '#3390ff'
               },
               // 设置折线下面的区域颜色
               areaStyle: {
                 color: {
                 type: 'linear',
                 x: 0,
                 y: 0,
                 x2: 0,
                 y2: 1,
                 colorStops: [{
                   offset: 0, color: 'rgba(201,222,241,0.8)'  // 0% 处的颜色
                 }, {
                 offset: 1, color:  'rgba(201,222,241,0.5)' // 100% 处的颜色
                 }],
                 global: false // 缺省为 false
                }
              },
              }
           },
             // 多一条折线图，这里我做了双线。
             {
               name: '点券',
               data: coupon,
               type: 'line',
               label: {
                 show: true,
                 position: 'top',
                 fontSize: 10
               },
                // 线条点的颜色
                itemStyle: {
                  color: '#ffc456'
                },
                // 线条颜色
                lineStyle: {
                  color: '#ffc456'
                }
              }
            ]
          }
          myChart.setOption(option)
          // 宽度自适应
          window.addEventListener("resize", () => {
              myChart.resize();
          });
        })

最后

以上就是含糊耳机为你收集整理的echarts使用及配置1.npm下载然后在单页面中引入。2.在html中添加div标签加上id，并添加宽度和高度。3.添加事件创建echarts。的全部内容，希望文章能够帮你解决echarts使用及配置1.npm下载然后在单页面中引入。2.在html中添加div标签加上id，并添加宽度和高度。3.添加事件创建echarts。所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。