vue echarts的应用

1 安装

cnpm i -S vue-echarts echarts

Vue 2 下使用 vue-echarts，必须还要安装 @vue/composition-api ：

cnpm i -D @vue/composition-api

2 main.js中全局注册组件

import 'echarts'
import ECharts from 'vue-echarts'
Vue.component('v-chart', ECharts)

3 使用代码

<template>
  <div class="index">
    <el-carousel indicator-position="outside" :interval="10000" height="300px">
      <el-carousel-item v-for="item in imgurls" :key="item.id">
        <img :src="item.idView" />
      </el-carousel-item>
    </el-carousel>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-card shadow="always" class="box-card">
          <v-chart :option="option_column1" style="height: 250px"></v-chart>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="always" class="box-card">
          <v-chart :option="option_column" style="height: 250px"></v-chart>
        </el-card>
      </el-col>
    </el-row>
    <div style="padding-top: 20px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card shadow="always" class="box-card">
            <v-chart :option="option_column" style="height: 250px"></v-chart>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="always" class="box-card">
            <v-chart :option="option_column" style="height: 250px"></v-chart>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style>
.box-card {
  padding-left: 5%;
}
</style>



<script>
export default {
  data() {
    return {
      imgurls: [
        { id: 0, idView: require("../assets/p1.jpg") },
        { id: 1, idView: require("../assets/p2.jpg") },
        { id: 2, idView: require("../assets/p3.jpg") },
      ],
      option_column: {
        title: { text: "Column Chart" },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      },
      option_column1: {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
              { value: 580, name: "Email" },
              { value: 484, name: "Union Ads" },
              { value: 300, name: "Video Ads" },
            ],
          },
        ],
      },
    };
  },
};
</script>

效果：

图片.png

不同模板 请参考官网代码 直接复制就可以：

https://echarts.apache.org/examples/zh/index.html#chart-type-pie