vue中使用echarts基础

vue2中使用echarts

1、不封装echarts

(1)npm 获取

npm install echarts --save

(2) 在vue页面中写相应的数据，展示图表

<template>
  <div class="about">
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>
<script>
//全局引入
// import * as echarts from 'echarts';
// 按需引入
import * as echarts from "echarts/core";
import { TitleComponent,ToolboxComponent, LegendComponent } from "echarts/components";
import { PieChart } from "echarts/charts";
import { LabelLayout } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([
  ToolboxComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout,
  TitleComponent,
]);

export default {
  name: "Echartseasy",
  // 不使用组件的时候
  mounted() {
    var myChart = echarts.init(document.getElementById("main"));
    var options = {
      title: {
        text: "未封装的echarts",
        left: "center"
      },
      legend: {
        top: "bottom"
      },
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      series: [
        {
          name: "Nightingale Chart",
          type: "pie",
          radius: ["20%", " 50%"],
          center: ["50%", "50%"],
          roseType: "area",
          itemStyle: {
            borderRadius: 8
          },
          data: [
            { value: 40, name: "rose 1" },
            { value: 38, name: "rose 2" },
            { value: 32, name: "rose 3" },
            { value: 30, name: "rose 4" },
            { value: 28, name: "rose 5" },
            { value: 26, name: "rose 6" },
            { value: 22, name: "rose 7" },
            { value: 18, name: "rose 8" }
          ]
        }
      ]
    };
    myChart.setOption(options);
  }
};
</script>

 2、封装echarts

在父组件中引入子组件和所需的数据

（1）父组件

<template>
  <div class="about">
    <!-- 自定义属性把数据传递给子组件 -->
    <EchartsEasy :options="options"></EchartsEasy>
  </div>
</template>
<script>
import EchartsEasy from '@/components/EchartsEasy.vue';
import options from '../libs/EchartsEasy'
export default {
    data() {
        return {
            options: options
        };
    },
    components: { EchartsEasy }
};
</script>

（2）子组件

<template>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="main" :style="style"></div>
</template>

<script>
//全局引入
// import * as echarts from 'echarts';
// 按需引入
import * as echarts from "echarts/core";
import {
  TitleComponent,
  ToolboxComponent,
  LegendComponent
} from "echarts/components";
import { PieChart } from "echarts/charts";
import { LabelLayout } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([
  ToolboxComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout,
  TitleComponent
]);

export default {
    props:{
        width:{
            type:String,
            default:'600px'
        },
        height:{
            type:String,
            default:'400px'
        },
        options:{
            type:Object,
            default:null
        },
    },
    computed:{
        style(){
            return{
                height:this.height,
                width:this.width
            }
        }
    },
    data() {
        return {
            myChart:null
        }
    },
    mounted() {
    var myChart = echarts.init(document.getElementById('main'));
    
    myChart.setOption(this.options);
  }
};
</script>

<style>
</style>

（3）所需数据

export default {
    title: {
        text: "封装的echarts",
        left: "center"
    },
    legend: {
        top: "bottom"
    },
    toolbox: {
        show: true,
        feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
        }
    },
    series: [
        {
            name: "Nightingale Chart",
            type: "pie",
            radius: ["20%", " 50%"],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
                borderRadius: 8
            },
            data: [
                { value: 40, name: "rose 1" },
                { value: 38, name: "rose 2" },
                { value: 32, name: "rose 3" },
                { value: 30, name: "rose 4" },
                { value: 28, name: "rose 5" },
                { value: 26, name: "rose 6" },
                { value: 22, name: "rose 7" },
                { value: 18, name: "rose 8" }
            ]
        }
    ]
};