1.下包
npm i echarts --save
2.引入并绑定在vue实例上
// 引入可视化echarts
import * as echarts from 'echarts'
// 绑定在实例上
Vue.prototype.$echarts = echarts
3.使用$echarts.init初始化一个dom,使用setoption方法把数组中的数据以图标形式打印在初始化的dom里,代码如下
<template>
<div>
<div class="EchartPractice">
<div id="main"></div>
</div>
</div>
</template>
<script>
import ditu from './ditu.vue';
export default {
name: 'echartsa',
components: {
ditu,
},
methods: {
drawChart() {
// 初始化一个echarts的dom
let myEchart = this.$echarts.init(document.getElementById("main"));
let option = {
// 标题
title: {
text: "Vue中使用Echarts小练习"
},
// 图例
tooltip: {},
legend: {
data: ["销量"]
},
// 类别数组
xAxis: {
data: ["苹果", "香蕉", "橘子", "葡萄",]
},
// 销量数组,bar柱形图
yAxis: {},
series: [{
name: '销量',
type: "bar",
data: [50, 60, 45, 30,]
}]
};
// 折线图
// let option = {
// xAxis: {
// type: 'category',
// data: ['A', 'B', 'C']
// },
// yAxis: {
// type: 'value'
// },
// // line折线图
// series: [
// {
// data: [120, 200, 150],
// type: 'line'
// }
// ]
// };
// 饼图
// let option = {
// series: [
// {
// // 饼图pie
// type: 'pie',
// data: [
// {
// value: 335,
// name: '直接访问'
// },
// {
// value: 234,
// name: '联盟广告'
// },
// {
// value: 1548,
// name: '搜索引擎'
// },{
// value: 1000,
// name: '引擎'
// }
// ]
// }
// ]
// };
// 散点图scatter
// let option = {
// xAxis: {
// data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
// },
// yAxis: {},
// series: [
// {
// type: 'scatter',
// data: [220, 182, 191, 234, 290, 330, 310]
// }
// ]
// };
// 通过setoptions方法把数据生成柱状图放到初始化出来的dom上
myEchart.setOption(option);
}
},
// 实例化完成调用方法
mounted() {
this.drawChart();
}
}
</script>
<style>
#main {
width: 600px;
height: 400px;
margin: auto;
margin-top: 100px
}
</style>