在webpack中echarts的使用安装教程
程序员文章站
2022-05-16 21:11:40
webpack中使用echarts
1、安装echarts
npm install echarts --save
2、全量引入echarts
var echarts...
webpack中使用echarts
1、安装echarts
npm install echarts --save
2、全量引入echarts
var echarts = require('echarts');
3、按需引入echarts
// 引入 ECharts 主模块 var echarts = require('echarts/lib/echarts'); require("echarts/lib/chart/line");//引入折线图 require("echarts/lib/chart/bar");//引入柱状图 require("echarts/lib/chart/pie");//引入饼图 // 引入提示框和标题组件 require('echarts/lib/component/tooltip');//引入提示 require('echarts/lib/component/title');//引入标题 require('echarts/lib/component/legend');//引入图例
柱状图示例:
<p class="zztChart ui-chart" id="zztChart"></p> var myChart = echarts.init(document.getElementById('zztChart')); myChart.setOption({ title: { text: '世界人口总量', subtext: '数据来自网络' }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { data: ['2011年', '2012年'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', data: ['巴西','印尼','美国','印度','中国','世界人口(万)'] }, yAxis: { type: 'value', boundaryGap: [0, 0.01] }, series: [ { name: '2011年', type: 'bar', data: [18203, 23489, 29034, 104970, 131744, 630230] }, { name: '2012年', type: 'bar', data: [19325, 23438, 31000, 121594, 134141, 681807] } ] });
上一篇: 佛教中的地藏王菩萨的生日是哪一天的
下一篇: HTML5之New Elements
推荐阅读
-
Bootstarp在pycharm中的安装及简单的使用方法
-
Ubuntu中Opencv的安装使用教程
-
在vscode中安装使用pylint-django插件解决pylint的一些不必要的错误提示
-
在Python中使用itertools模块中的组合函数的教程
-
mongodb 在 linux 中的安装和简单使用
-
Python中Numpy包的安装与使用方法简明教程
-
在Python3中使用asyncio库进行快速数据抓取的教程
-
在Vultr VPS主机上安装使用Windows Server的教程及评测
-
在Centos7中安装Docker1.12的详细教程
-
在电脑上安装配置使用安卓Android模拟器的方法(图文教程)