npm install echarts --save ? ?
import echarts from "echarts";

<template>
? <div>
? ? <div id="demo"></div>
? </div>
</template>
<script>
export default {
? data() {
? ? return {
? ? ? option: {
? ? ? ? title: {
? ? ? ? ? text: "走勢(shì)圖", //標(biāo)題設(shè)置‘參保情況'
? ? ? ? ? // subtext: "純屬虛構(gòu)",
? ? ? ? ? left: "center", //標(biāo)題位置
? ? ? ? },
? ? ? ? tooltip: {
? ? ? ? ? //鼠標(biāo)hover覆蓋提示框
? ? ? ? ? trigger: "axis", //坐標(biāo)線(xiàn)提示
? ? ? ? ? // trigger: "item", //根據(jù)item提示信息
? ? ? ? ? // formatter: " : {c} ", //提示內(nèi)容
? ? ? ? ? axisPointer: {
? ? ? ? ? ? type: "cross",
? ? ? ? ? ? label: {
? ? ? ? ? ? ? backgroundColor: "#6a7985",
? ? ? ? ? ? },
? ? ? ? ? },
? ? ? ? },
? ? ? ? legend: {
? ? ? ? ? bottom: "5%",
? ? ? ? ? data: ["第一項(xiàng)", "第二項(xiàng)"],
? ? ? ? },
? ? ? ? xAxis: {
? ? ? ? ? axisTick: {
? ? ? ? ? ? show: false, //不顯示坐標(biāo)軸刻度線(xiàn)
? ? ? ? ? },
? ? ? ? ? axisLine: {
? ? ? ? ? ? show: false, //不顯示坐標(biāo)軸線(xiàn)
? ? ? ? ? },
? ? ? ? ? type: "category",
? ? ? ? ? data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
? ? ? ? ? boundaryGap: false, //與x軸無(wú)縫隙
? ? ? ? },
? ? ? ? yAxis: {
? ? ? ? ? axisTick: {
? ? ? ? ? ? show: false, //不顯示坐標(biāo)軸刻度線(xiàn)
? ? ? ? ? },
? ? ? ? ? axisLine: {
? ? ? ? ? ? show: false, //不顯示坐標(biāo)軸線(xiàn)
? ? ? ? ? },
? ? ? ? ? type: "value",
? ? ? ? ? // splitLine: {
? ? ? ? ? // ? show: false, //不顯示網(wǎng)格線(xiàn)
? ? ? ? ? // },
? ? ? ? },
? ? ? ? grid: {
? ? ? ? ? left: "5%",
? ? ? ? ? right: "5%",
? ? ? ? ? bottom: "20%",
? ? ? ? ? containLabel: true,
? ? ? ? },
? ? ? ? series: [
? ? ? ? ? {
? ? ? ? ? ? name: "第一項(xiàng)", //設(shè)置名稱(chēng)，跟數(shù)據(jù)無(wú)相關(guān)性
? ? ? ? ? ? hoverAnimation: true, //鼠標(biāo)懸停效果，默認(rèn)是true
? ? ? ? ? ? data: [
? ? ? ? ? ? ? { value: 335, name: "設(shè)備1" },
? ? ? ? ? ? ? { value: 335, name: "設(shè)備1" },
? ? ? ? ? ? ? { value: 310, name: "設(shè)備2" },
? ? ? ? ? ? ? { value: 234, name: "設(shè)備3" },
? ? ? ? ? ? ? { value: 135, name: "設(shè)備4" },
? ? ? ? ? ? ? { value: 1548, name: "設(shè)備5" },
? ? ? ? ? ? ? { value: 135, name: "設(shè)備4" },
? ? ? ? ? ? ? { value: 1548, name: "設(shè)備5" },
? ? ? ? ? ? ],
? ? ? ? ? ? type: "line",
? ? ? ? ? ? // 區(qū)域有背景
? ? ? ? ? ? areaStyle: {
? ? ? ? ? ? ?//color: "#1ADA6F",
? ? ? ? ? ? ?},
? ? ? ? ? ? smooth: true,
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? name: "第二項(xiàng)",
? ? ? ? ? ? data: [220, 222, 333, 222, 444, 222, 444],
? ? ? ? ? ? type: "line",
? ? ? ? ? ? areaStyle: {},
? ? ? ? ? ? smooth: true,
? ? ? ? ? },
? ? ? ? ],
? ? ? },
? ? };
? },
? mounted() {
? ? // ? 這個(gè)方法不能放在greated生命周期,因?yàn)槟菚r(shí)候dom還沒(méi)初始化完成
? ? this.echarts();
? },
? methods: {
? ? echarts() {
? ? ? // 引入 ECharts 主模塊
? ? ? var echarts = require("echarts/lib/echarts");
? ? ? // 引入柱狀圖(這個(gè)例子可以去掉)
? ? ? require("echarts/lib/chart/bar");
? ? ? // 引入提示框和標(biāo)題組件
? ? ? require("echarts/lib/component/tooltip");
? ? ? require("echarts/lib/component/title");
? ? ? // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
? ? ? var myChart1 = echarts.init(document.getElementById("demo"));
? ? ? // 繪制餅圖
? ? ? myChart1.setOption(this.option);
? ? ? // 繪制折線(xiàn)圖
? ? },
? },
};
</script>

<style lang="scss">
#demo {
? width: 500px;
? height: 300px;
}
</style>