1.安裝echarts?
npm install echarts -S
2.在main.js中引用echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
3.封裝chart組件(復(fù)制粘貼就好了)
<!-- 為 ECharts 準(zhǔn)備一個(gè)具備大熊瘛（寬高）的 DOM -->
<div id="bar" style="width: 600px;height:400px;"></div>
<div id="pie" style="width: 600px;height:400px;"></div>
<div id="line" style="width: 600px;height:400px;"></div>
在script里面寫下面內(nèi)容
export default{
????mounted(){
? ??this.drawLine();//調(diào)用這個(gè)方法
},
????methods:{
? ??????drawLine () {
? ? ? ? var echarts = require('echarts');
? ? ? ? var barChart = echarts.init(document.getElementById('bar'));
????????var pieChart = echarts.init(document.getElementById('pie'));
????????var lineChart = echarts.init(document.getElementById('line'));
? ? ? ? barChart.setOption({
? ? ? ? ? title: {
? ? ? ? ? ? ? text: '柱狀圖'
? ? ? ? ? },
? ? ? ? ? tooltip: {},
? ? ? ? ? legend: {
? ? ? ? ? ? ? data: ['銷量']
? ? ? ? ? },
? ? ? ? ? xAxis: {
? ? ? ? ? ? ? data: ["肉夾饃", "饅頭", "豆沙包", "粉絲湯", "豆包", "油條"]
? ? ? ? ? },
? ? ? ? ? yAxis: {},
? ? ? ? ? series: [{
? ? ? ? ? ? ? name: '銷量',
? ? ? ? ? ? ? type: 'bar',
? ? ? ? ? ? ? data: [5, 20, 36, 10, 10, 20]
? ? ? ? ? }]
? ? ? ? });
pieChart.setOption({
? title: {
? ? ? text: '餅圖'
? },
? series: [{
? ? ? name: '訪問來源',
? ? ? type: 'pie', // 設(shè)置圖表類型為餅圖
? ? ? radius: '55%', // 餅圖的半徑，外半徑為可視區(qū)尺寸（容器高寬中較小一項(xiàng)）的 55% 長度振亮。
? ? ? data: [ // 數(shù)據(jù)數(shù)組巧还，name 為數(shù)據(jù)項(xiàng)名稱鞭莽，value 為數(shù)據(jù)項(xiàng)值
? ? ? ? ? {
? ? ? ? ? ? ? value: 235,
? ? ? ? ? ? ? name: '視頻廣告'
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? ? value: 274,
? ? ? ? ? ? ? name: '聯(lián)盟廣告'
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? ? value: 310,
? ? ? ? ? ? ? name: '郵件營銷'
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? ? value: 335,
? ? ? ? ? ? ? name: '直接訪問'
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? ? value: 400,
? ? ? ? ? ? ? name: '搜索引擎'
? ? ? ? ? }
? ? ? ]
? }]
});
lineChart.setOption({
? title: {
? ? ? text: '折線圖',
? },
? tooltip: {},
? legend: {
? ? ? data: ['銷量', '試穿', '退貨'],
? ? ? x: 'right'
? },
? xAxis: {
? ? ? data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]
? },
? yAxis: {},
? series: [{
? ? ? name: '銷量',
? ? ? type: 'line',
? ? ? data: [5, 20, 36, 10, 10, 20]
? }, {
? ? ? name: '試穿',
? ? ? type: 'line',
? ? ? data: [30, 40, 50, 20, 12, 30]
? }, {
? ? ? name: '退貨',
? ? ? type: 'line',
? ? ? data: [1, 2, 1, 3, 5, 2]
? }]
});
? ? ? }
????}
}
