echarts各種圖 小記
阿新 • • 發佈:2020-12-29
1.安裝 npm install echarts --save
<template> <div class="home"> <div id='main' style="width: 600px;height:400px;"></div> </div> </template> <script> import echarts from 'echarts' export default { name: 'index', data () { return { option:{ title: { text:'ECharts 入門示例' }, tooltip: {}, xAxis: { data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子'] }, yAxis: {}, series: [{ name: '銷量', type: 'line', data: [5, 20, 36, 10, 10, 20] },{ name: '銷量', type:'bar', data: [5, 20, 36, 10, 10, 20] }] } } }, mounted () { // var echarts = require('echarts'); // 基於準備好的dom,初始化echarts例項 // var myChart = $echarts.init(document.getElementById('main')); var myChart = echarts.init(document.getElementById('main')); // 繪製圖表 myChart.setOption(this.option); }, methods: { } } </script>
系列型別(series.type
)至少有:line(折線圖)、bar(柱狀圖)、pie(餅圖)、scatter(散點圖)、graph(關係圖)、tree(樹圖)