vue饼图组件_Vue接入Echarts 显示柱状图饼图

Vue接入Echarts 显示柱状图饼图

使用CLI接入

npm install echarts --save

1.可以全局引入(在main.js)

// 引入echarts

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

2.或者局部引入(在script)

import echarts from 'echarts'

直接在template里面写上 div容器

在下边script里边直接绘制

export default {

name: 'hello',

data () {

return {

msg: 'Welcome to Your Vue.js App'

}

},

mounted(){

this.drawLine();

},

methods: {

drawLine(){

// 基于准备好的dom，初始化echarts实例

let myChart = this.$echarts.init(document.getElementById('myChart'))

// 绘制图表

myChart.setOption({

title: { text: '在Vue中使用echarts' },

tooltip: {},

xAxis: {

data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

},

yAxis: {},

series: [{

name: '销量',

type: 'bar',

data: [5, 20, 36, 10, 10, 20]

}]

});

}

}

}

这样的基本显示案例就完成了

然后根据你自己的要求去官网的案例里面找 合适你自己的

注意：官网上都是写了一个 option 你把这个配置好 直接在方法里面 setOption( option ) 就可以了

option 里边的内容很简单 就能看懂

知识点1

myChart.setOption({...},true)

设置为true的话，就是notMerge，不合并

false的话，就Merge，之前的东西还保留~

要是需要重新渲染的时候 可以设置清空

myChart.clear();

知识点2

你要自己设定颜色的话就写个color

color: ["#2bb5e4","#90ed7d"],

当系列数量个数比颜色列表长度大时将循环选取

知识点3 (网上看见的)

图表选项，包含图表实例任何可配置选项：公共选项 ，组件选项 ，数据选项

名称

描述

{color}backgroundColor

全图默认背景，(详见backgroundColor)，支持rgba，默认为无，透明

{Array} color

数值系列的颜色列表，(详见color)，可配数组，eg：['#87cefa', 'rgba(123,123,123,0.5)','...']，当系列数量个数比颜色列表长度大时将循环选取

{boolean}renderAsImage

非IE8-支持渲染为图片，(详见renderAsImage)

{Object} timeline

时间轴(详见timeline)，每个图表最多仅有一个时间轴控件

{Object} title

标题(详见title)，每个图表最多仅有一个标题控件

{Object} toolbox

工具箱(详见toolbox)，每个图表最多仅有一个工具箱

{Object} tooltip

提示框(详见tooltip)，鼠标悬浮交互时的信息提示

{Object} legend

图例(详见legend)，每个图表最多仅有一个图例，混搭图表共享

{Object} dataRange

值域选择(详见dataRange),值域范围

{Object} dataZoom

数据区域缩放(详见dataZoom),数据展现范围选择

{Object} roamController

漫游缩放组件(详见roamController),搭配地图使用

{Object} grid

直角坐标系内绘图网格(详见grid)

{Array | Object} xAxis

直角坐标系中横轴数组(详见xAxis)，数组中每一项代表一条横轴坐标轴，标准(1.0)中规定最多同时存在2条横轴

{Array | Object} yAxis

直角坐标系中纵轴数组(详见yAxis)，数组中每一项代表一条纵轴坐标轴，标准(1.0)中规定最多同时存在2条纵轴

{Array} series

驱动图表生成的数据内容(详见series)，数组中每一项代表一个系列的特殊选项及数据