Vue集成简单的可视化图表v-charts

1.效果

2.Vue插件

版本对应

 "vue": "2.6.12",
"v-charts": "^1.19.0",
 "@vue/composition-api": "^1.7.2",
 "echarts": "5.4.2",

下载方式

按照下面的格式进行下载，其他的类似

npm install v-charts@1.19.0

3.全局注册

import VueECharts from "vue-echarts";


Vue.component("v-chart", VueECharts);

4.测试使用

对应的前端组件代码

<template>
<div style="width: 100%;height: 100%;">
  <v-chart :options="chartData2" style="width: 100%;" />
</div>
</template>

<script>
export default {
  name: "BarChart",
  props:{
    xAxisData:{
      type : Array,
      default:[]
    },
    yAxisData:{
      type : Array,
      default:[]
    }
  },
  created() {
    const vm = this
    //设置x和y轴的数据
    vm.chartData2.xAxis.data = this.xAxisData
    vm.chartData2.series[0].data = this.yAxisData
  },
  data() {
    return {
      chartData2:{
        color: ["#5793f3", "#d14a61", "#675bba"],
        title: {
          text: "阅读量排行榜",
        },
        xAxis: {
          type: "category",
          data: [],
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        yAxis: {
          type: "value",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        series: [
          {
            data:[],
            type: "line",
            label: {
              show: true,
              position: "top",
              formatter: "{b}\n{c}篇",
              textStyle: {
                color: "#333",
              },
            },
          },
        ],
      },
    }
  },
  methods:{
    
  }
}
</script>

<style scoped>

</style>