vue 使用echarts画柱状图

橙s曦

已于 2023-02-14 14:40:18 修改

阅读量985

点赞数 2

文章标签： echarts vue.js javascript

于 2023-02-14 14:38:07 首次发布

本文链接：https://blog.csdn.net/m0_49062914/article/details/129026471

版权

安装模块: npm install --save echarts

全局注册在main.js文件写入代码

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

单个页面使用

<template>
  <Page>
    <page-main>
      <div class="test-container">
        <div id="myChartBar"></div>
      </div>
    </page-main>
  </Page>
</template>

<script>
export default {
  name: 'Test',
  data () {
    return {
      myChartBar: null, // 折线图
      chartOptionBar: {
        legend: {
          show: false,
          left: 0,
          top: 0,
          itemWidth: 14,
          itemHeight: 14,
          textStyle: {
            color: '#000',
          },
        },
        tooltip: {
          trigger: 'item'
        },
        grid: {
          containLabel: true,
          top: 50,
          left: 10,
          right: 15,
          bottom: 15,
          width: 'auto', //图例宽度
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          // 坐标轴刻度
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true, //
            lineStyle: {
              color: '#293843', // x轴线颜色
            },
          },
          axisLabel: {
            textStyle: {
              color: '#000',
            },
            align: 'center',
          },
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: '#293843',
            },
          },
          axisLabel: {
            textStyle: {
              color: '#000',
            },
          },
        },
        series: [
          {
            name: '',
            data: [44540.57, 64038.35, 64263.82, 68963.54, 78932.06, 50969.39, 72784.71, 87979.53, 77678.91, 65348.56, 83008.5, 61542.54],
            color: '#208CFC',
            type: 'bar',
          },
        ],
      },
    };
  },
  methods: {

  },
  mounted() {
    this.myChartBar = this.$echarts.init(document.getElementById('myChartBar'));
    this.myChartBar.setOption(this.chartOptionBar);
  }
};
</script>

<style lang="scss" scoped>
  .test-container {
    padding: 20px;
    width: 700px;
    height: 500px;
    background: #fff;
    #myChartBar {
      width: 100%;
      height: 100%;
    }
  }
</style>