マイクロチャネルは、Echartsを使用するアプレット

マイクロチャネルは、Echartsを使用するアプレット

echartsでダウンロードGitプロジェクト

住所:https://github.com/ecomfe/echarts-for-weixin

紹介のコンポーネント

示すように、ファイルは、EC-キャンバスカタログでダウンロードしたプロジェクトでそれを入れて、同じレベルにページ:
ここに画像を挿入説明

チャートを作成します。

示すように、新しいディレクトリページ、という名前のインデックスに、自動的に4つのファイルindex.wxss index.js、index.json、index.wxmlを、生成され、ディレクトリページ内のディレクトリを作成します。
ここに画像を挿入説明
index.jsonで追加:
ここでは、この役割INSERT構成されたことは、私たちは内のページ/バー/ index.wxmlでコンポーネントを使用することができるようにすることです。 画像のキャプション
この設定の役割は、私たちは内のページ/バー/ index.wxmlでコンポーネントを使用することができるようにすることです。

index.wxmlで書かれました

ここに画像を挿入説明で導入されたEchartsのindex.js
ASからのインポートecharts *」... / ... / EC-キャンバス/ echarts';
LETチャート= NULL;
ここに画像を挿入説明
データへの書き込み:
ここに画像を挿入説明
書き込みのgetDataあなたがチャート表示する必要がある
のgetData(){
チャート.setOption({
タイトル:{
テキスト: 'バーグラフ'
}、
凡例:{
データ:[ '販売']
}、
XAXIS:{
データ:[ "A"、 "B"、 "C"、 "D"、 " E "" F「]
}、
YAXIS:{}、
シリーズ:[{
名: '売上高'、
タイプ: 'バー'、
データ:[5、20であり、36、10、10、20]
}]
})
}

ヒストグラム千万人の後
ここに画像を挿入説明

 如果一个页面需要显示多个图表

ここに画像を挿入説明
ここに画像を挿入説明
ここに画像を挿入説明
ここに画像を挿入説明
ここに画像を挿入説明
ここに画像を挿入説明
...チャートの省略部分は、彼らが必要なコンテンツを書くことができます
ここに画像を挿入説明

リリース3元の記事 ウォンの賞賛0 ビュー546

おすすめ

転載: blog.csdn.net/qq_41529009/article/details/105212603