【讨论】Echarts和vue-echarts相比，我更倾向直接用Echarts

之前也是遇到要用Echarts，当时不知道有vue-echarts，所以先用了Echarts，后来才知道，这次又有页面画图标，便仔细的衡量下用哪个更好，总结下各自的优缺点，大家有想法也可以说一说

分析

vue-echarts：是不用配置，直接传数据就ok的，如果要配置的话就参考echarts的文档；

echarts：每使用一个配置一个，当然如果都是一样的样式你也可以自己封装二次组件

虽然吧，这么看来是vue-echarts使用更简便，但我觉得其实设计稿的样式都没有跟vue-echarts一模一样的，我觉得还是用Echarts更自由点，不过要注意，都是要按需引入的

 

//echarts.js   （在main.js引入）
// 引入echarts图表
import Vue from 'vue'
import echarts from 'echarts/lib/echarts'

// 按需引入类型
import 'echarts/lib/chart/line' // 折线图
import 'echarts/lib/chart/bar' // 柱形图
import 'echarts/lib/chart/pie' // 饼状图
import 'echarts/lib/chart/funnel' // 地理图

// 按需引入配置功能组件
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/dataZoom'
import 'echarts/lib/component/toolbox'
import 'echarts/lib/component/markLine'
import 'echarts/lib/component/markPoint'

// 引入 SVG 渲染器模块
import 'zrender/lib/svg/svg'

Vue.prototype.$echarts = echarts

事例图：

 

截图.png

 

<template>
  <!-- 人口档案比中情况 -->
  <div id="population-file-ratio-echart" class="echarts"></div>
</template>

<script>
export default {
  name: 'population-file-ratio',
  data () {
    return {
      height: '100%',
      dataAxis: ['11-5', '11-10', '11-15', '11-20', '11-25'],
      data1: [500, 1000, 1500, 2000, 120],
      data2: [200, 800, 1200, 1700, 150],
      label: ['档案1', '档案2'],
      type: 'bar'
    }
  },
  mounted () {
    this.setEchars()
  },
  methods: {
    setEchars () {
      let myChart = this.$echarts.init(document.getElementById('population-file-ratio-echart'), null, { renderer: 'svg' }) // 基于准备好的dom，初始化echarts实例
      // 绘制图表
      myChart.setOption({
        title: {
          text: '人口档案比中情况'
        },
        grid: {
          left: '10px',
          right: '10px',
          bottom: '10px',
          containLabel: true
        },
        tooltip: {},
        calculable: true,
        xAxis: {
          type: 'category',
          data: this.dataAxis,
          axisTick: { show: false },
          axisLine: { lineStyle: { color: '#ccc' } },
          axisLabel: { color: '#333' }
        },
        yAxis: [
          {
            splitLine: { show: false },
            axisTick: { show: false },
            axisLine: { lineStyle: { color: '#ccc' } },
            axisLabel: { color: '#333' }
          }
        ],
        series: [
          {
            name: this.label[0],
            type: this.type,
            data: this.data1,
            markLine: {
              data: [{ type: 'max', name: '平均值' }],
              label: { show: false },
              lineStyle: { type: 'dotted', color: '#979797' }
            },
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#5085E3' },
                  { offset: 0.5, color: '#2D62CA' },
                  { offset: 1, color: '#133063' }
                ])
              },
              emphasis: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#5085E3' },
                  { offset: 0.7, color: '#2D62CA' },
                  { offset: 1, color: '#133063 ' }
                ])
              }
            }
          },
          {
            name: this.label[2],
            type: this.type,
            data: this.data2,
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#7BA7FF' },
                  { offset: 0.5, color: '#2D62CA' },
                  { offset: 1, color: '#133063 ' }
                ])
              },
              emphasis: {
                // 高亮的图形样式和标签样式
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#7BA7FF' },
                  { offset: 0.7, color: '#2D62CA' },
                  { offset: 1, color: '#133063 ' }
                ])
              }
            }
          }
        ]
      })

      // 当浏览器窗口发生变化的时候调用div的resize方法
      window.onresize = function () {
        myChart.resize()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
</style>