从0开始学VUE--使用Django+Vue 构建一个Web项目(9) eChart的使用_vue echart element django

ECharts介绍

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

安装echart

npm install --save echarts

引入echart

在main.js中添加下面两行代码

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

新建Echart.vue

<template>
  <div id="app">
    <div id="main1" style="width: 80%; height: 500px; margin: 0 auto"></div>
    <div id="main2" style="width: 80%; height: 500px; margin: 0 auto"></div>
    <div id="main3" style="width: 80%; height: 500px; margin: 0 auto"></div>