echarts特定場景下配置。

1.安裝

# 全局安裝 vue-cli
$ npm install --global vue-cli
# 創(chuàng)建一個基于 webpack 模板的新項目
$ vue init webpack my-project
# 安裝依賴，走你
 cd my-project
 npm install
 npm run dev

2.引用

import echarts from 'echarts'

3.修改style標簽

一毛肋、圓餅圖

app.title = '環(huán)形圖';

option = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>魄健: {c} (yib1m0b%)"
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        data: ['直接訪問', '郵件營銷', '聯盟廣告', '視頻廣告', '搜索引擎']
    },
    series: [{
        name: '訪問來源',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        // label: {
        //     normal: {
        //         show: false,
        //         position: 'center'
        //     },
        //     emphasis: {
        //         show: true,
        //         textStyle: {
        //             fontSize: '30',
        //             fontWeight: 'bold'
        //         }
        //     }
        // },
        labelLine: {
            normal: {
                show: false
            }
        },
        label: {
            normal: {
                position: 'inner',
                formatter: ": {c} (ashvxol%)"
            }
        },
        data: [{
                value: 335,
                name: '直接訪問'
            },
            {
                value: 310,
                name: '郵件營銷'
            },
            {
                value: 234,
                name: '聯盟廣告'
            },
            {
                value: 135,
                name: '視頻廣告'
            },
            {
                value: 1548,
                name: '搜索引擎'
            }
        ]
    }]
};

2019-01-17_11h28_36.png

二泼菌、城市柱形圖

            //設置字體傾斜
            axisLabel: {
              interval: 0,
              rotate: 45,//傾斜度 -90 至 90 默認為0
              margin: 10,
              textStyle: {
                color: "#000000"
              }
            }