我用的是vs code工具
先在命令行下載echarts插件
npm install echarts --save
在main.js中引用：
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
下來我們就在vue里面可以用了
template里面寫口糕，她和我們用的平常的HTML沒有什么差別砰嘁，主要是js
<div id="main" style="height:400px"></div>
script里面的內(nèi)容比較重要，手機也可以用
內(nèi)容很長，其實主要就是把drawChart() 方法放在methods里面伺糠，在mounted里面調(diào)用就可以了。
export default {
? name: "app",
? data(){
? ? ? return{}
? },
? methods: {
? ? drawChart() {
? ? ? // 基于準備好的dom，初始化echarts實例
? ? ? let myChart = this.$echarts.init(document.getElementById("main"));
? ? ? // 指定圖表的配置項和數(shù)據(jù)
? ? ? let option = {
? ? ? ? ? ? tooltip : {
? ? ? ? ? ? ? ? trigger: 'axis'
? ? ? ? ? ? },
? ? ? ? ? ? legend: {
? ? ? ? ? ? ? ? data:['郵件營銷','聯(lián)盟廣告','視頻廣告','直接訪問','搜索引擎']
? ? ? ? ? ? },
? ? ? ? ? ? toolbox: {
? ? ? ? ? ? ? ? show : true,
? ? ? ? ? ? },
? ? ? ? ? ? grid:{
? ? ? ? ? ? ? ? x:50,
? ? ? ? ? ? },
? ? ? ? ? ? calculable : true,
? ? ? ? ? ? xAxis : [
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? type : 'category',
? ? ? ? ? ? ? ? ? ? boundaryGap : false,
? ? ? ? ? ? ? ? ? ? data : ['周一','周二','周三','周四','周五','周六','周日']
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ],
? ? ? ? ? ? yAxis : [
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? type : 'value'
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ],
? ? ? ? ? ? series : [
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name:'郵件營銷',
? ? ? ? ? ? ? ? ? ? type:'line',
? ? ? ? ? ? ? ? ? ? stack: '總量',
? ? ? ? ? ? ? ? ? ? data:[120, 132, 101, 134, 90, 230, 210]
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name:'聯(lián)盟廣告',
? ? ? ? ? ? ? ? ? ? type:'line',
? ? ? ? ? ? ? ? ? ? stack: '總量',
? ? ? ? ? ? ? ? ? ? data:[220, 182, 191, 234, 290, 330, 310]
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name:'視頻廣告',
? ? ? ? ? ? ? ? ? ? type:'line',
? ? ? ? ? ? ? ? ? ? stack: '總量',
? ? ? ? ? ? ? ? ? ? data:[150, 232, 201, 154, 190, 330, 410]
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name:'直接訪問',
? ? ? ? ? ? ? ? ? ? type:'line',
? ? ? ? ? ? ? ? ? ? stack: '總量',
? ? ? ? ? ? ? ? ? ? data:[320, 332, 301, 334, 390, 330, 320]
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name:'搜索引擎',
? ? ? ? ? ? ? ? ? ? type:'line',
? ? ? ? ? ? ? ? ? ? stack: '總量',
? ? ? ? ? ? ? ? ? ? data:[820, 932, 901, 934, 1290, 1330, 1320]
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ]
? ? ? ? };
? ? ? ? // 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
? ? ? ? myChart.setOption(option);
? ? ? ? setTimeout(function (){
? ? ? ? ? ? window.onresize = function () {
? ? ? ? ? ? ? ? myChart.resize();
? ? ? ? ? ? }
? ? ? ? },200)
? ? }
? },
? mounted() {
? ? this.drawChart();
? }
};
如果我們是把他放在手機里绑莺，那么就要加，上面的我已經(jīng)寫了
?myChart.setOption(option);
? ? ? ? setTimeout(function (){
? ? ? ? ? ? window.onresize = function () {
? ? ? ? ? ? ? ? myChart.resize();
? ? ? ? ? ? }
? ? ? ? },200)
但是手機里有時候我們的數(shù)據(jù)太長就會顯示不全惕耕，下面這句就可以解決纺裁，x越大數(shù)據(jù)就會往右移動，這樣我們就可以自己調(diào)了
grid:{
? ? ? ? ? ? ? ? x:50,
? ? ? ? ? ? }
