vue中echarts的按需引入
引入npm install echarts -S使用去官网引入你想要的图表:https://echarts.apache.org/zh/cheat-sheet.html在你想使用的VUE页面<template><div id="chart"></div></template><script>let echarts...
·
引入
npm install echarts -S
使用
去官网引入你想要的图表:https://echarts.apache.org/zh/cheat-sheet.html
在你想使用的VUE页面
<template>
<div id="chart"></div>
</template>
<script>
let echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/bar') //柱状图
require('echarts/lib/chart/pie') //饼图
//下面的是需要的提示框
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
export default {
mounted() {
this.draw ('chart'); //调用
},
methods:{
draw (id) {
let myChart = echarts.init(document.getElementById(id));
myChart.setOption( {
legend: {},
tooltip: {},
dataset: {
source: [
['product', '新增用户', '新增信用卡', '新增商户'],
['Matcha Latte', 43.3, 85.8, 93.7],
['Milk Tea', 83.1, 73.4, 55.1],
['Cheese Cocoa', 86.4, 65.2, 82.5],
['Walnut Brownie', 72.4, 53.9, 39.1]
]
},
xAxis: {type: 'category'},
yAxis: {},
// Declare several bar series, each will be mapped
// to a column of dataset.source by default.
series: [
{type: 'bar',color:"#f96f96"},
{type: 'bar',color:"#7794ec"},
{type: 'bar',color:"#efaf49"}
]
});
},
}
}
</script>
效果图
更多推荐
已为社区贡献1条内容
所有评论(0)