2019-01-17

echarts特定场景下配置。

1.安装

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
 cd my-project
 npm install
 npm run dev

2.引用

import echarts from 'echarts'

3.修改style标签

一、圆饼图

app.title = '环形图';

option = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    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: "{b}: {c} ({d}%)"
            }
        },
        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"
              }
            }