1.打开echarts
点击网址进行下载
引入 Apache ECharts
在刚才保存 echarts.js
的目录新建一个 index.html
文件,内容如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="echarts.js"></script> //引入的地址
<script type="text/javascript">
书写有关echarts有关代码
</script>
</head>
</html>
打开这个 index.html
,你会看到一片空白。但是不要担心,打开控制台确认没有报错信息,就可以进行下一步。
或者
NPM 安装 ECharts
你可以使用如下命令通过 npm 安装 ECharts
npm install echarts --save
引入 ECharts
<template>
<div id="main" ref="main" style="width: 600px; height: 400px"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
name: "HelloWorld",
data() {
return {
};
},
mounted() {
this.draw()
},
methods: {
draw(){ //所有东西在此处配置
// 基于准备好的dom,初始化echarts实例 不能删除
var myChart = echarts.init(this.$refs.main);
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例',
textStyle:{
color:'#f00'
}
},
tooltip: { //提示框
triggerOn: "none",
alwaysShowContent: true,
position: function(pt) {
return [pt[0], 130];
}
},
//color:"#f00", //设置图表颜色
legend: { //图例说明
data: ['销量'],
show :true
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
// position:'top',
},
yAxis: {},
series: [ //系列
{
name: '销量',
type: 'bar',
// inverse:true 柱状图翻转
// type: 'line', //折线图
// barWidth:17, //柱条的宽度
data: [5, 20, 36, 10, 10, 20],
// barCategoryGap:"5%" //柱间距离
itemStyle:{
//每个柱子的不同颜色
normal:{
color:function(params){
var colorList = [
"#00A3E9",
"#ffA100",
"#ffc0cb",
"#cccccc",
"#BBFFAA",
"#ca8622",
];
return colorList[params.dataIndex]
}
}
}
}
],
};
// 使用刚指定的配置项和数据显示图表。 不能删除
myChart.setOption(option);
}
},
};
</script>
<style scoped>
</style>
设置图表重叠
<template>
<div id="main" ref="main" style="width: 600px; height: 400px"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
name: "HelloWorld",
data() {
return {
};
},
mounted() {
this.draw()
},
methods: {
draw() {
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(this.$refs.main);
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例',
textStyle: {
color: '#f00'
}
},
tooltip: { //提示框
},
legend: { //图例说明
data: ['销量'],
show: true
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
},
yAxis: {},
series: [ //系列
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
},
{
name: '销量',
type: 'line',
data: [5, 28, 54, 32, 20, 20],
},
{
type: 'pie',
width:'35%',
height:'35%',
left:'center',
top:'top',
data: [{
value: 335,
name: "Apple",
},
{
value: 310,
name: "Grapes",
},
{
value: 234,
name: "Pineapples",
},
{
value: 135,
name: "oranges",
}
],
}
],
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
},
};
</script>
<style scoped>
</style>
散点图