Vue(ElementUI)使用Echarts(一)——Element导入Echarts

Vue使用Echart（一）

一、引入ECharts

1、直接引入echarts (安装echarts项目依赖)

npm install echarts --save

二、使用Echart

1、全局引入

我们安装完成之后，可以在main.js中全局引入 echarts

// echarts-4.0
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

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

全局引入后，可以直接在界面使用

全局引入使用Echart

使用子组件标签的形式来声明Echart，注意:option="gaugeOption"相当于该图表的名字

在js代码的data的return中写上如下代码，就可以使用

gaugeOption: {
    tooltip: {
    formatter: "{a} 
{b} : {c}%",
    },
    series: [
    {
        name: "Pressure",
        type: "gauge",
        detail: {
        	formatter: "{value}",
        },
    data: [
        {
            value: 50,
            name: "SCORE",
        },
    	],
    },
    ],
},

2：导入Echarts组件作为父组件（按需引入）

自定义一个Vue界面如Echarts.vue作为父组件如下

三：子组件引用父组件

总实现效果如下（只看效果，把标题打码）

1.子组件导入父组件

<script>
import Echarts from "../../components/charts/Echarts";

export default {
  components: {
    Echarts,
  },
  data(){
    return{}
  }
 </script>

2.按需引入使用Echart

使用子组件标签的形式来声明Echart，注意:option="gaugeOption"相当于该图表的名字

在js代码的data的return中写上如下代码，就可以使用

gaugeOption: {
    tooltip: {
    formatter: "{a} 
{b} : {c}%",
    },
    series: [
    {
        name: "Pressure",
        type: "gauge",
        detail: {
        	formatter: "{value}",
        },
    data: [
        {
            value: 50,
            name: "SCORE",
        },
    	],
    },
    ],
},

就可以实现效果如下的Echarts图表（其他同理）