1. 程式人生 > 實用技巧 >echarts各種圖 小記

echarts各種圖 小記

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(樹圖)