Vue移动端项目中使用echarts

vue项目中如何使用echarts

首先下载插件

npm i echarts -S

然后在main.js中引入插件

// 引入
import echarts from 'echarts'

// 注册
Vue.prototype.$echarts = echarts

在需要的组件中初始化图表

// 获取需要生成图表的元素
// 以下是一些常用的配置参数 都有写明详细的注释
    initChart () {
      let echarts = this.$echarts.init(document.getElementById('charts'))
      let option = {
        xAxis: {
          type: 'category',
          data: ['4', '5', '6', '7', '8', '9', '10'],
          splitLine: { show: true, // 纵向分割线显示
            lineStyle: { // 纵向分割线样式设置
              color: 'rgba(242,237,207,1)' // 如果值是一个数组的话 就可以给每条线设置不同样式
            }
          },
          splitArea: { show: false }, // 纵向背景区域
          axisTick: { show: false }, // 除去x轴的刻度
          axisLine: {
            lineStyle: { color: '#ccc', width: 0, height: 0 } // x轴
          },
          boundaryGap: false, // 使折点与x轴的数值对齐 为true时是与刻度对齐
          axisLabel: { // 控制x轴文本
            show: true,
            textStyle: { color: '#ccc', fontSize: 12 }
          }
        },
        yAxis: {
          type: 'value',
          splitLine: { show: false },
          axisLine: {
            lineStyle: { color: '#fff', width: 0 } // y轴
          }
        },
        series: [{
          lineStyle: { // 折线颜色
            normal: {
              color: '#F6C20A'
            }
          },
          smooth: true,
          // symbol: 'circle', //设定为实心点
          symbolSize: 4, // 设置折点的大小
          itemStyle: {
            normal: { // 折点颜色
              label: { // 为true时  设置拐点上方值 格式'{b}:{c}'
                show: false,
                formatter: '{c}'
              },
              color: '#F6C20A',
              width: 3
            },
            emphasis: {
              label: {
                show: true
              }
            }
          },
          // data: [45, 50, 51, 50, 49, 48, 53],
          data: [
            { value: 45 },
            { value: 50 },
            { value: 51 },
            { value: 50 },
            { value: 49 },
            { value: 48 },
            { value: 60, label: { show: true } } // 给指定的拐点上方显示值
          ],
          type: 'line'
        }],
        grid: { // 设置网格距离canvase外层盒子距离
          x: 40,
          y: 30,
          x2: 40,
          y2: 70
        }
      }
      echarts.setOption(option)
    },


// 然后在mounted里调用该方法就可以了
  mounted () {
    this.initChart()
  }

最终展示的效果就是图下所示啦