vue中引入echart

最新推荐文章于 2023-08-24 01:23:51 发布

原创最新推荐文章于 2023-08-24 01:23:51 发布 · 376 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #前端 #javascript #view design

本文介绍了如何在Vue.js应用中集成ECharts库，通过引入ECharts模块，设置组件内的div，并在mounted阶段初始化图表，展示了创建不同样式柱状图的方法。

不管有没提示不规范或者找不到字符，不报错且效果能达到即可，webstorm似乎会报一些奇怪的提示。

1、先去官网引入一下

快速上手 - Handbook - Apache ECharts

2、在main.js中加入如下代码：

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3、以下是我的组件的代码，思路就是你一个图标要对应一个div，然后参照官方的代码，修改setOption函数内部的参数即可。

<template>
  <div style="display:flex;">
    <div id="myChart" :style="{width: '300px', height: '300px'}" name="第一个图"></div>
    <div id="second" :style="{width: '300px', height: '300px'}" name="柱子样式"></div>
    <div id="third" :style="{width: '300px', height: '300px'}" name="多系列柱状图"></div>
  </div>
</template>

<script>
  // 引入基本模板
  let echarts = require('echarts/lib/echarts')
  // 引入柱状图组件
  require('echarts/lib/chart/bar')
  // 引入提示框和title组件
  require('echarts/lib/component/tooltip')
  require('echarts/lib/component/title')
  export default {
    name: 'hello',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    mounted() {
      this.drawLine();
    },
    methods: {
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
          title: { text: 'ECharts 入门示例' },
          tooltip: {},
          xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
          },
          yAxis: {},
          series: [{
            name: '销量',
            type: 'bar',
            data: [50, 20, 36, 10, 10, 20]
          }]
        });

        let second = echarts.init(document.getElementById('second'))
        second.setOption({
          xAxis: {
            data: ['A', 'B', 'C', 'D', 'E']
          },
          yAxis: {},
          series: [
            {
              type: 'bar',
              data: [
                10,
                22,
                28,
                {
                  value: 43,
                  // 设置单个柱子的样式
                  itemStyle: {
                    color: '#91cc75',
                    shadowColor: '#91cc75',
                    borderType: 'dashed',
                    opacity: 0.5
                  }
                },
                49
              ],
              itemStyle: {
                barBorderRadius: 5,
                borderWidth: 1,
                borderType: 'solid',
                borderColor: '#73c0de',
                shadowColor: '#5470c6',
                shadowBlur: 3
              }
            }
          ]
        })

        let third = echarts.init(document.getElementById('third'))
        third.setOption({
          xAxis: {
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {},
          series: [
            {
              type: 'bar',
              data: [23, 24, 18, 25, 27, 28, 25]
            },
            {
              type: 'bar',
              data: [26, 24, 18, 22, 23, 20, 27]
            },
            {
              type: 'bar',
              data: [23, 24, 18, 25, 27, 28, 25]
            }
          ]
        })

      }
    }
  }
</script>