1.先安裝Echarts
1.使用npm 安裝或者
npm install echarts -S
2.使用cnpm淘寶鏡像安裝
安裝淘寶鏡像
npm install -g cnpm --registry=https://registry.npm.taobao.org
使用淘寶鏡像安裝Echarts
cnpm install echarts -S
2.在main.js中引用
不用打包程序中引用讽挟，注冊全局組件
import * as echarts from 'echarts/lib/echarts'
在打包程序中引用加上（按需引入）
import * as echarts from 'echarts/core'
// BarChart柱狀圖
import {
? BarChart
} from 'echarts/charts';
import {
? TitleComponent,
? TooltipComponent,
? GridComponent
} from 'echarts/components';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必須的一步
import {
? CanvasRenderer
} from 'echarts/renderers';
// 注冊必須的組件
echarts.use(
? [TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer]
);
在官方文檔中查看
3.實現(xiàn)Echarts繪圖
<template>
? ? <div>
????????<h1>數(shù)據(jù)報表</h1>
? ? ? ? <div class="main">
? ? ? ? ? ? <div id="myChart" :style='{width: 300px;height: 400px;}'></div>
? ? ? ? </div>
? ? </div>
</template>
1.在腳手架中使用（打包程序）
export default {
????data(){
????????return{
? ? ? ? ? ? //存放數(shù)據(jù)
????????}
????}
},
methods:{
? ? drawLine() {
? ? ? ? let myChart = this.$echarts.init(document.getElementById('myChart'));
? ? ? ? // 繪制圖表
? ? ? ? myChart.setOption({
? ? ? ? ? ? title: {
? ? ? ? ? ? ? ? text: '我的第一個ECharts學(xué)習(xí)',
? ? ? ? ? ? ? ? textStyle：{
? ? ? ? ? ? ? ? ? ? ? ? //設(shè)置顯示文字樣式
????????????????}
? ? ? ? ? ? ? ? //設(shè)置標(biāo)題大小超出x軸不顯示
? ??????????????axisLabel: { interval:0, // rotate:40, formatter:function(value) { return value.split("").join("\n"); }},
},
? ? ? ? ? ? backgroundColor: '#cdd2d2',
? ? ? ? ? ? tooltip: {},
? ? ? ? ? ? xAxis: {
? ? ? ? ? ? ? ? data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
},
? ? ? ? ? ? yAxis: {},
? ? ? ? ? ? series: [{
? ? ? ? ? ? ? ? name: '銷量',
? ? ? ? ? ? ? ? type: 'bar',
? ? ? ? ? ? ? ? //data: [5, 20, 36, 10, 10, 20]
? ? ? ? ? ? ? ? //單獨(dú)設(shè)置每一項中的樣式
? ??????????????data: [{
value: 5,
name:"襯衫",
itemStyle: { color: '#c23531'}
}]
});
},
},
//注意：我們要在mounted生命周期函數(shù)中實例化echarts對象坑填。因為我們要確保dom元素已經(jīng)掛載到頁面中
mounted() {
? ? this.drawLine()
}
不需要打包程序中使用
