# vue-vant-echart

**Repository Path**: pxyn/vue-vant-echart

## Basic Information

- **Project Name**: vue-vant-echart
- **Description**: 1、柱状图堆叠混合折线图 2、开口环形进度图
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2019-09-22
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

1、安装echarts
`npm install echarts --save`

```
<template>
  <div id="echart" style="width: 100%;height: 500px; padding-top: .6rem">
  </div>
</template>

<script>
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/line')
require('echarts/lib/chart/bar')

// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

export default {
  name: 'eCharts',
  data () {
    return {
    }
  },
  mounted () {
    setTimeout(() => {
      this.drawLine()
    }, 1500)
  },
  methods: {
    drawLine () {
      // 基于准备好的dom，初始化echarts实例
      let eChart = echarts.init(document.getElementById('echart'))
      // 绘制图表
      eChart.setOption({
        title: { text: '降雨量' },
        tooltip: {},
        xAxis: [{
          type: 'category',
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#e3e3e3'
            }
          },
          axisLabel: {
            inside: false,
            textStyle: {
              color: '#999',
              fontWeight: 'normal',
              fontSize: '12'
            }
          },
          splitLine: {show: false}, // 去除网格线
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
        }, {
          type: 'category',
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: { show: false },
          splitArea: { show: false },
          splitLine: { show: false },
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
        }],
        yAxis: [{
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#32346c'
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: '#32346c '
            }
          },
          axisLabel: {
            textStyle: {
              color: '#bac0c0',
              fontWeight: 'normal',
              fontSize: '12'
            },
            formatter: '{value}'
          }
        }, {
          type: 'value',
          yAxisIndex: 1,
          min: 0,
          max: 100,
          axisLabel: {
            formatter: '{value}%',
            textStyle: {
              color: '#999'
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: 'transparent' // 坐标轴线颜色
            }
          },
          splitLine: { show: false }// 去除网格线
        }],
        series: [{
          type: 'bar',
          itemStyle: {
            normal: {
              show: true,
              color: '#5275FD',
              borderWidth: 0
            },
            emphasis: {
              shadowBlur: 15,
              shadowColor: 'rgba(105,123, 214, 0.7)'
            }
          },
          zlevel: 2,
          barWidth: 20,
          data: [100, 200, 400, 300, 500, 500, 500]
        }, {
          name: '',
          type: 'bar',
          xAxisIndex: 1,
          zlevel: 1,
          itemStyle: {
            normal: {
              color: '#D4DDFF',
              borderWidth: 0,
              shadowBlur: {
                shadowColor: 'rgba(255,255,255,0.31)',
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowOffsetY: 2
              }
            }
          },
          barWidth: 20,
          data: [1000, 1000, 1000, 1000, 1000, 1000, 1000]
        }, {
          zlevel: 3,
          type: 'line',
          data: [150, 220, 430, 360, 450, 680, 800],
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#ff8300'
              }
            }
          }
        }]
      })
    }
  }
}

</script>

<style scoped>

</style>
```
![输入图片说明](https://gitee.com/uploads/images/2018/0628/204837_54e55d92_701004.png "微信图片_20180627185741.png")