使用echart图表进行vue的详细方法

本文分享vue使用echart图表的方法，供大家参考。具体内容如下

该示例是用vue-cli脚手架构建的

安装echarts依赖项

Npm安装echarts或使用国内淘宝形象：

装置

使用npminstall-gcnpm-registry=https://registry.npm.taobao.org。

Cnpm安装echarts创建图表

全球简介

main.js

//从' e charts' vue.prototype引入Echartsimport e charts . $ e charts=e charts hello . vue

div id=' myChart ' : style=' { width : ' 300 px '，height : ' 300 px ' } '/dive export default { name : ' hello '，data () { return { msg: '欢迎使用您的vue . js App ' } } }，mounted(){ this . draw line()；}，methods: {drawLine(){ //基于准备好的dom，Initialize echarts实例让mychart=this。$ echart . init(document . getelementbyid(' mychart ')//制作图表my chart。set option({ title : { text : ' use echart in Vue ' }，tooltip : {}，xaxis 3360 {data : ['衬衫'，'毛衣'，'雪纺衬衫'，'长裤'，'高跟鞋'，'袜子' Yaxis : {}，系列： [{name : '销量'，type :' bar '，data : [5，20，36，10，10，20]}])}}}注意：这里，echarts初始化应该在hook function mounted()中，在el被新创建的vm替换后调用。$el并安装在实例上

按需引入

以上全球介绍将所有echarts图表打包，导致体积较大，我觉得还是按需介绍比较好。

你好，vue

//引入基本模板让e charts=require(' e charts/lib/e charts ')//引入直方图组件require(' e charts/lib/chart/bar ')//引入提示框和标题组件require(' e charts/lib/component/tooltip ')require(' echart/lib/component/title ')导出默认{ name: 'hello '，data() { return { msg: '欢迎使用您的Vue.js App' } }，mounted(){ this . draw line()；}，methods: {drawLine() {//基于准备好的dom，Initialize echarts实例让mychart=eCharts。init(document . getelementbyid(' mychart '))//绘制图表my chart。set option({ title : { text : '入门eCharts ' }，Tooltip : {}，xaxis 3360 {data: ['衬衫'，'毛衣'，'雪纺衬衫'，'裤子'，'高跟鞋'，'袜子']})，yaxis 3360 {}，series : [{name 3360 '销量' }}}这里使用require代替import的原因是可以直接从node_modules找到require，而import必须写下所有路径。

页面显示

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。