目录
1、安装
1.1、npm安装ECharts
npm install echarts --save
1.2、yarn安装ECharts
yarn add echarts --save
1.3、使用国内淘宝镜像安装ECharts
安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
使用淘宝镜像安装ECharts
cnpm install echarts -S
2、全局引入和使用
2.1、引入ECharts
在main.js中引入ECharts。
import echarts from 'echarts'; // 把 echarts 挂载到Vue实例的原型上 // 并且重命名为 $echarts Vue.prototype.$echarts = echarts;
2.2、使用ECharts
<div id="myChart" :style="{ width: '500px', height: '500px' }"></div>
export default {
name: "eCharts",
data() {
return {
};
},
mounted() {
// 模板挂载完成后调用
this.drawEcharts();
},
methods: {
drawEcharts() {
// 基于准备好的dom，初始化echarts实例
// 第一种写法，不需要在当前页定义标签id
// let myChart = this.$echarts.init(this.$el);
// 第二种写法
let myChart = this.$echarts.init(document.getElementById("myChart"));
// 绘制图表
myChart.setOption({
title: {
text: 'ECharts 入门示例'
},
tooltip: {
},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {
},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
})
}
}
}
3、局部引入和使用
<div id="myChart" :style="{ width: '500px', height: '500px' }"></div>
// 引入ECharts
let echarts = require('echarts');
export default {
mounted() {
this.$nextTick(() => {
this.initChart();
});
},
methods: {
initChart() {
// 方式一
// let chart = echarts.init(this.$el);
// 方式二
let chart = echarts.init(document.getElementById("myChart"));
chart.setOption({
title: {
text: "PM 2.5 均值浓度变化情况",
textStyle: {
color: "#000",
},
x: "center",
top: "5%",
},
backgroundColor: "#fff",
tooltip: {
trigger: "axis",
formatter: "value：{c}<br/>时间：{b}",
},
// 保存图片
toolbox: {
top: "5%",
right: "5%",
iconStyle: {
borderColor: "#1890ff",
},
feature: {
saveAsImage: {
type: "png",
name: "PM2.5均值浓度变化情况",
},
},
},
xAxis: {
type: "category",
data: ["2021-09-01 10:00", "2021-09-01 11:00", "2021-09-01 12:00"],
},
yAxis: {
type: "value",
boundaryGap: false,
name: "ug/m³",
splitLine: {
show: false,
},
// y轴不能设置值
// data: [0, 30, 60, 90],
},
series: [
{
data: [6, 30, 60],
type: "line",
},
],
});
},
}
}