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();
});