第一步:安装echarts和vue-echarts包。
npm install echarts,vue-echarts
第二步:引入ECharts组件和图标相关依赖。
import ECharts from "vue-echarts/components/ECharts"
// 柱状。
import "echarts/lib/chart/bar";
// 饼状。
import "echarts/lib/chart/pie";
// 题目。
import "echarts/lib/component/title"
// 说明图标。
import 'echarts/lib/component/legend'
// 提示。
import "echarts/lib/component/tooltip"
// 坐标。
import 'echarts/lib/component/polar'
第三步:引入echars依赖数据并赋值给组件。
export default {
name: "App",
components: {
ECharts
},
data() {
return {
// echarts饼状图1。
pie1: {
title: {
text: "某站点用户访问来源",
subtext: "纯属虚构",
left: "center"
},
tooltip: {
trigger: "item",
formatter: "{a}
{b} : {c} ({d}%)"
},
legend: {
orient: "vertical",
left: "left",
data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"]
},
series: [
{
name: "访问来源",
type: "pie",
radius: "55%",
center: ["50%", "60%"],
data: [
{ value: 335, name: "直接访问" },
{ value: 310, name: "邮件营销" },
{ value: 234, name: "联盟广告" },
{ value: 135, name: "视频广告" },
{ value: 1548, name: "搜索引擎" }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
}
]
},
// echarts饼状图。
pie: {
tooltip: {
trigger: "item",
formatter: "{a}
{b}: {c} ({d}%)"
},
legend: {
orient: "vertical",
left: 10,
data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"]
},
series: [
{
name: "访问来源",
type: "pie",
radius: ["50%", "70%"],
avoidLabelOverlap: false,
label: {
show: false,
position: "center"
},
emphasis: {
label: {
show: true,
fontSize: "30",
fontWeight: "bold"
}
},
labelLine: {
show: false
},
data: [
{ value: 335, name: "直接访问" },
{ value: 310, name: "邮件营销" },
{ value: 234, name: "联盟广告" },
{ value: 135, name: "视频广告" },
{ value: 1548, name: "搜索引擎" }
]
}
]
},
// echarts柱状图。
bar: {
title: {
text: "ECharts 入门示例"
},
tooltip: {},
legend: {
data: ["销量"]
},
xAxis: {
data: ["衬衫", "建教帮", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20]
}
]
}
};
}
};