echarts在（React，Vue）中的使用总结

文档地址

echarts官网地址https://echarts.baidu.com/（百度的）

npm方法使用echarts

在vue中使用echarts（在官方文档 文档——>教程——>5 分钟上手 ECharts）

你可以使用如下命令通过 npm 安装 ECharts

npm install echarts --save

vue中使用 

在vue的main.js中引入  （vue.prototype（实例化）链接地址）

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

实现代码

//templatelate中的代码
<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
//created中的代码
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart'))
let userchart = this.$echarts.init(document.getElementById('userchart'))
let zhejiangChart = this.$echarts.init(document.getElementById('zhejiangChart'))
    // 绘制图表
    myChart.setOption({
    title: { text: '彩票种类的月销售排行' },
    tooltip: {},
    xAxis: {
         data: ["5元","10元","15元"]
    },
    yAxis: {},
    series: [{
    name: '销量',
    type: 'bar',
    data: [88, 20, 36]
    }]
});

效果图：

地图显示区域

需要提前下载好地图的json文件，可以参考香港地图来做，地址

记得这个位置的HK一定要改掉

echarts.registerMap('HK', geoJson);

react中使用

import echarts from 'echarts';

引入之后

    componentDidMount(){
        // 基于准备好的dom，初始化echarts实例
        var myChartbar = echarts.init(document.getElementById('echart-info'));
        this.barEchart(myChartbar )
      
    }
    barEchart=(myChartbar)=>{
        let barSource = [
            ['高压', 503, 1185.8],
            ['次高压', 8.1, 273.4],
            ['中压', 6.4, 865.2],
            ['阀门', 70, 953.9],
            ['测压器', 40, 953.9],
            ['重点单位', 120, 953.9],
        ]
        let barData = [
            {value:'高压',textStyle:textStyle},
            {value:'次高压',textStyle:textStyle},
            {value:'中压',textStyle:textStyle},{value:'阀门',textStyle:textStyle},
            {value:'测压器',textStyle:textStyle},{value:'重点单位',textStyle:textStyle}
        ]
        myChartbar.setOption({
            legend: {},     /* 图例组件 */
            tooltip: {},    /* 图例组件 */
            dataset: {
                source: barSource
            },
            textStyle:{
                fontSize:18
            },
            grid: {
                left:40,
                borderColor:'#1E9ED3',
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                        label: {
                            show: true,
                            formatter: function (params) {
                                return params.value.replace('\n', '');
                            }
                        }
                    }
                }
            },
            xAxis: {
                type:'category',
                axisLabel:{'interval':0},
                axisLine:{lineStyle:{color:'#249CF9'}},
                axisTick:{show:false},
                data:barData
            },
            yAxis: {
                show:true,
                axisTick:{show:false},
                axisLine:{lineStyle:{color:'#249CF9'}},
            },
            series: [
                {type: 'bar',barWidth:'20%',itemStyle:{color:'#249CF9'}},
                {type: 'bar',barWidth:'20%',itemStyle:{color:'#FDB628'}}
            ]
        });
    }

效果图：

问题：如何自定义柱状图Y轴字体(axisLabel)

            yAxis: {
                show:true,
                axisTick:{show:false},
                axisLine:{lineStyle:{color:'#249CF9'}},
                axisLabel: {
                    textStyle: {
                        color: '#f5f5f5'
                    }
                }
            },

如图

自适应宽度

echarts 随着页面的宽度，变化而变化。

 var myChartbar = echarts.init(document.getElementById('Keyunit'));
/* 自动缩放 */
window.addEventListener("resize", function () {
    myChartbar.resize();
});