前言
主要介绍Vue中如何使用Echarts,如何安装Echarts到如何在项目中使用,通过一个模板方式介绍使用Echarts的步骤。
一、安装
npm install echarts --save
二、使用
参考模板
<template>
<div>
<div id="chart" style="width: 600px; height: 400px"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
name: "chart",
methods: {
getChart() {
let myChart = echarts.init(document.getElementById("chart"));
let option = {
title: {
text: "ECharts 示例",
},
tooltip: {},
legend: {
data: ["销量"],
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
};
myChart.setOption(option);
},
},
mounted() {
this.getChart();
},
};
</script>
操作步骤
Step1
第一步需要先造一个Dom节点挂载这个chart图形。
<template>
<div>
<div id="chart" style="width: 600px; height: 400px"></div>
</div>
</template>
Step2
Vue mounted时调用方法初始化操作,产生myChart 对象。
<template>
<div>
<div id="chart" style="width: 600px; height: 400px"></div>
</div>
</template>
step3
配置option对象。
let option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}
]
};
Step4
调用setOption方法并传入配置项。
myChart.setOption(option);
编写示例
编写示例时,可以找到一个CodeSandbox然后通过添加自己需要的依赖包,就可以编写示例了。