安装
npm install echarts --save
引入 (全局)
main.js
import echarts from 'echarts' Vue.prototype.$echarts = echarts
使用
index.vue
<template> <div> <div id='line'></div> </div> </template> <script> export default { name:'index', mouted:{ const myChart = this.$echarts.init(document.getElementById("line")); //建议加上以下这一行代码,不加的效果图如下(当浏览器窗口缩小的时候) window.addEventListener("resize", function() { myChart.resize(); }); myChart.setOption({ color: ["#5fe3a1"], tooltip: { trigger: "axis", axisPointer: { type: "shadow", label: { show: true } } }, xAxis: { type: "category", data: ["12.3", "12.4", "12.5", "12.6", "12.7", "今天"], boundaryGap: false, axisTick: { alignWithLabel: true }, axisLine: { lineStyle: { color: "#A1A0AE" } } }, yAxis: { type: "value", axisLine: { lineStyle: { color: "#A1A0AE" } } }, series: [ { name: "日门诊量", type: "line", smooth: true, //平滑曲线显示 symbolSize: 10, //标记的大小 areaStyle: { color: { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: "rgba(60,196,128, 0.7)" }, { offset: 1, color: "rgba(254,254,254,0)" } ], globalCoord: false } }, data: [8100, 5000, 8596, 6000, 7500, 5500] } ] }); } } </script> <style scoped> #line{ width: 100%; height: 407px; margin: 0 auto; } </style>
效果
案例网址
直接复制代码,放在 myChart.setOption()
即可