1.先安装Echarts
1.使用npm 安装或者
npm install echarts -S
2.使用cnpm淘宝镜像安装
安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
使用淘宝镜像安装Echarts
cnpm install echarts -S
2.在main.js中引用
不用打包程序中引用，注册全局组件
import * as echarts from 'echarts/lib/echarts'
在打包程序中引用加上（按需引入）
import * as echarts from 'echarts/core'
// BarChart柱状图
import {
BarChart
} from 'echarts/charts';
import {
TitleComponent,
TooltipComponent,
GridComponent
} from 'echarts/components';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import {
CanvasRenderer
} from 'echarts/renderers';
// 注册必须的组件
echarts.use(
[TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer]
);
在官方文档中查看
3.实现Echarts绘图
<template>
<div>
<h1>数据报表</h1>
<div class="main">
<div id="myChart" :style='{width: 300px;height: 400px;}'></div>
</div>
</div>
</template>
1.在脚手架中使用（打包程序）
export default {
data(){
return{
//存放数据
}
}
},
methods:{
drawLine() {
let myChart = this.$echarts.init(document.getElementById('myChart'));
// 绘制图表
myChart.setOption({
title: {
text: '我的第一个ECharts学习',
textStyle：{
//设置显示文字样式
}
//设置标题大小超出x轴不显示
axisLabel: { interval:0, // rotate:40, formatter:function(value) { return value.split("").join("\n"); }},
},
backgroundColor: '#cdd2d2',
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
//data: [5, 20, 36, 10, 10, 20]
//单独设置每一项中的样式
data: [{
value: 5,
name:"衬衫",
itemStyle: { color: '#c23531'}
}]
});
},
},
//注意：我们要在mounted生命周期函数中实例化echarts对象。因为我们要确保dom元素已经挂载到页面中
mounted() {
this.drawLine()
}
不需要打包程序中使用
