vue中使用echarts小记

simple环形图

app.title = '环形图';

option = {
    title : {
        text: '人才密度',
        x:'center',
        y: 'bottom',
    },
    series: [
        {
            name:'访问来源',
            type:'pie',
            radius: ['50%', '70%'],
            silent:true,
            label: {
                normal: {
                    show: true,
                    position:'center',
                    formatter:function(){
                        return '总数：63%'
                    },
                    textStyle:{
                        color: 'rgba(0, 216, 160, 1)',
                        fontSize: 20
                    }
                },
            },
            hoverAnimation:false,
            data:[
                {value:635, name:'直接访问'},
                {value:1548, name:'搜索引擎'}
            ]
        }
    ]
};

vue里写echarts，要确保画布容器（标签）加载之后,图形数据拿到之后，才能对其进行相应渲染

<script>
var echarts = require('echarts');
mounted(){
  this.init();
},
methods:{
    init(){
        this.getRenderInfo();
    },
    getRenderInfo(){
        //异步操作成功之后
        this.highElements3 = [
            {value:15, name:'part1'},
            {value:85, name:'part2'}
        ]
        this.barData = [
            ['product', '品牌数量', '专利数量',],
            ['1', 66.6, 33.3,],
            ['2', 26.6, 53.3,],
            ['3', 16.6, 43.3,],
            ['4', 36.6, 53.3,],
            ['5', 86.6, 83.3,],
            ['6', 56.6, 93.3,],
            ['7', 46.6, 13.3,],
            ['8', 46.6, 13.3,],
            ['9', 96.6, 33.3,],
            ['10', 66.6, 43.3,],
            ['11', 66.6, 83.3,],
            ['12', 66.6, 33.3,],
        ]
        this.initCharts();
      }, 
      initCharts(){
        let circlePart1 = echarts.init(document.getElementById('circilePart1'));
        circlePart1.setOption(this.buildCircleOptions(this.highElements1,1));
        let pictorialPart = echarts.init(document.getElementById('rankPart'));
        pictorialPart.setOption(this.buildPictorialBarOptions(this.barData));
      },
      buildCircleOptions(data,num){
        let option = {
            title : {
                text: '人才密度',
                x:'center',
                y: 'bottom',
                textStyle:{
                  color: 'rgba(153, 153, 153, 1)',
                  fontSize: 14
                }
            },
            color:['rgba(0, 216, 160, 1)', 'RGBA(55, 61, 71, 1)',],
            series: [
                {
                    name:'访问来源',
                    type:'pie',
                    radius: ['50%', '70%'],
                    center: ['50%','42%'],
                    silent:true,
                    label: {
                        normal: {
                            show: true,
                            position:'center',
                            formatter:function(){
                                return `${data[0].value}%`
                            },
                            textStyle:{
                                color: 'rgba(255, 255, 255, 1)',
                                fontSize: 16
                            }
                        },
                    },
                    hoverAnimation:false,
                    data:data
                }
            ]
        };
        if(num == 1){option.title.text = this.highText1;option.color = this.highColor1}
        if(num == 2){option.title.text = this.highText2;option.color = this.highColor2}
        if(num == 3){option.title.text = this.highText3;option.color = this.highColor3}
        return option;
      }
}
</script>

echarts里一些自定义的图标，需要我们将本地的图片转换成svg格式，在webpack配置里配置图片格式转化，栗子🌰：

pathSymbols: {
            reindeer: 'image://' + require('../assets/img/pictorial1.png'),
            plane: 'image://' + require('../assets/img/pictorial2.png'),
            rocket: 'image://' + require('../assets/img/pictorial3.png'),
            train: 'image://' + require('../assets/img/pictorial4.png'),
            ship: 'image://' + require('../assets/img/pictorial5.png'),
            car: 'image://' + require('../assets/img/pictorial6.png'),
          },

写echarts柱状图不管是横向还是纵向的，经常会遇到一种情况，就是从echarts例子里配置好的echarts图表属性，放到自己项目代码中之后，并不能像echarts官网里一样的，图表撑不开整个echarts容器，把柱子宽度和柱子间隔写大也依然撑不开图表栅栏，这个时候就要自己额外写grid属性了，来配置图表的宽高度或位置位置

echarts解决文字过长或者数据间差值太大，导致文字重叠问题如何解决

        minAngle: 5, //最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
        avoidLabelOverlap: true,   //是否启用防止标签重叠策略

这两个属性放到series里面，这样就可以完美解决啦