Vue2 安装使用echarts

最新推荐文章于 2024-06-26 11:56:44 发布

Cooperb

最新推荐文章于 2024-06-26 11:56:44 发布

阅读量360

点赞数

文章标签： echarts vue.js javascript

本文链接：https://blog.csdn.net/Cooperb/article/details/125335610

版权

1.npm 安装

npm install echarts --save

2.main.js 引入

import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts;

3.组件使用

import * as echarts from 'echarts';

drawChart() {
  // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
  var myChart = echarts.init(document.getElementById("c2"));
  myChart.setOption({

    backgroundColor: '#031d33',
    grid: {
      top: 0,
      bottom: 0,
      left: '10%',
      right: '10%',
    },
    xAxis: {
      show: false,
      type: 'value',
      boundaryGap: [0, 0],
    },
    yAxis: [
      {
        type: 'category',
        data: [''],
        axisLine: { show: false },
        axisTick: [
          {
            show: false,
          },
        ],
      },
    ],
    series: [
      {
        name: '金额',
        type: 'bar',
        zlevel: 1,
        itemStyle: {
          normal: {
            barBorderRadius: 30,
            color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
              {
                offset: 1,
                color: 'rgba(48, 236, 166, 1)',
              },
              {
                offset: 0,
                color: 'rgba(48, 236, 166, 0.5)',
              },
            ]),
          },
        },
        barWidth: 20,
        data: [10],
      },
      {
        name: '背景',
        type: 'bar',
        barWidth: 20,
        barGap: '-100%',
        data: [20],
        itemStyle: {
          normal: {
            color: 'rgba(28, 128, 213, 0.19)',
            borderWidth: 1,
            borderColor: 'rgba(48, 236, 166, 1)',
            barBorderRadius: 30,
          },
        },
      },
    ],
  })
},