zoukankan      html  css  js  c++  java
  • vue使用ECharts的折线图

    1.下载

    npm install echarts --save

    2.在main.js中引入

    import echarts from 'echarts'
    Vue.prototype.$echarts = echarts

    3.使用

    <div id="map" style=" 100%;height:326px;"></div>
     getMap() {
          var myChart = this.$echarts.init(document.getElementById('map'))
          let option = {
            xAxis: {
              type: 'category',
              // data: this.dataX,
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
              boundaryGap: false, //控制日期是否在中间显示
              axisLabel: {
                show: true, //是否显示日期
                interval: 0, //强制显示全部 // rotate: 40,//倾斜的角度
                textStyle: {
                  color: '#000', //日期的颜色
                  fontSize: 12 //字体的大小
                }
              },
              axisLine: {
                lineStyle: {
                  color: '#ccc' // x轴的颜色
                }
              }
            },
            yAxis: {
              type: 'value',
              axisLabel: {
                formatter: '{value}',
                textStyle: {
                  color: '#000' //数字的颜色
                },
                inside: false //控制数据是否在内侧还是外侧显示
              },
              axisLine: {
                lineStyle: {
                  color: '#ccc' // 折线的颜色
                }
              }
            },
            series: [
              {
                // data: this.dataY,
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                symbol: 'circle', //是否显示实心的折线圆点
                smooth: true, //让折线有弧度
                symbolSize: 7, //折线圆点的大小
                itemStyle: {
                  normal: {
                    color: '#efc883', //折线点的颜色
                    lineStyle: {
                      color: '#efc883' //折线的颜色
                    },
                    label: { show: true } //是否在折线点上显示数字
                  }
                }
              }
            ]
          }
          myChart.setOption(option)
        }

    4.效果图

  • 相关阅读:
    HTML DOM教程 14HTML DOM Document 对象
    HTML DOM教程 19HTML DOM Button 对象
    HTML DOM教程 22HTML DOM Form 对象
    HTML DOM教程 16HTML DOM Area 对象
    ubuntu 11.04 问题 小结
    VC6.0的 错误解决办法 小结
    boot.img的解包与打包
    shell里 截取字符串
    从零 使用vc
    Imagemagick 对图片 大小 和 格式的 调整
  • 原文地址:https://www.cnblogs.com/wu-hen/p/13696042.html
Copyright © 2011-2022 走看看