レコードを学習Echarts

あなたはいくつかの方法でEChartsを得ることができます。

インターフェイスをダウンロードする公式サイトあなたがダウンロードする必要があるバージョンを選択し、開発者向け機能とボリュームのニーズに応じて、我々は、ダウンロードするためのさまざまなパッケージを提供していますが、ボリュームに頼まれていない場合、あなたはダウンロードすることができ、フルバージョンを。開発環境をダウンロードすることをお勧めしますソースコードのバージョンを、それが一般的なエラーメッセージや警告が含まれています。
EChartsで GitHubの最新ダウンロード release 版を、中にフォルダから抽出 dist あなたがechartsライブラリの最新バージョンを見つけることができますディレクトリ。
echarts取得することにより、NPM、npm install echarts --save「参照のWebPACKにechartsを使用します」
CDNの導入、あなたができる cdnjs、npmcdn または国内 bootcdn EChartsの最新バージョンを見つけます

いくつかの例をechartsの導入

HTMLで導入

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
</html>

2. VUEに組み込まれました

2.1 npm install echarts --save

2.2 在main.js中引入

import echarts from 'echarts'//在vue中引入echarts
Vue.prototype.$echarts = echarts //全局引用

3.使い方

HTML 3.1の使用

//1.定义一个具有宽高的容器
<div id="main" style="width:200px;height:200px"> </div>

<script>   
2.// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
3.// 绘制图表
myChart.setOption({
    title: {//标题
        text: 'ECharts 入门示例'
    },
    tooltip: {},//提示信息
    xAxis: {//x座标
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},//y座标
    series: [{//数据
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
});
</script>

のVUEでは3.2

在methods生命周期里面定义一个函数

kk(){

 // 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('chart1'));
// 绘制图表
let option = {
 title:{},//标题
 xAxis: {//x座标
        type: 'category',
        data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
    },
    yAxis: {},//y座标
    series: [//数据
        {
            type: 'bar',
            name: '2015',
            data: [89.3, 92.1, 94.4, 85.4]
        },
        {
            type: 'bar',
            name: '2016',
            data: [95.8, 89.4, 91.2, 76.9]
        },
        {
            type: 'bar',
            name: '2017',
            data: [97.7, 83.1, 92.5, 78.1]
        }
    ]

}
	myChart.setOption(option);
}

4.特定のパラメータを参照することができ

https://echarts.baidu.com/echarts2/doc/doc.html#%E5%BC%95%E5%85%A5ECharts

5.いくつかの例を参照することができ

https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all

おすすめ