使用js引入echarts

简介: 使用js引入echarts

1.首先在项目里打开cmd命令行

输入

vue3

npm add echarts

vue2

npm install echarts

2.然后在node_modules里就会看见一个echarts

这样的文件夹

3.在需要的页面里引入



在mounted里写

            var myChart = echarts.init(document.getElementById('echartContainer'));
      // 绘制图表
      myChart.setOption({
          title: { text: 'ECharts 入门示例' },
          tooltip: {},
          xAxis: {
              data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
          },
          yAxis: {},
          series: [{
          realtimeSort: true,
          barWidth: 14,
          barGap: 10,
          smooth: true,
          valueAnimation: true,
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
          }]
      });


在html里面写

<div id="app">
    <!--创建一个echarts的容器-->
    <div id="echartContainer" style="width:400px; height:400px"></div>
  </div>


就可以了

相关文章
|
1天前
|
移动开发 JavaScript
echarts生成图表并下载为PDF文件(附带js源码地址)
echarts生成图表并下载为PDF文件(附带js源码地址)
42 0
|
6月前
|
JavaScript 前端开发
echarts同一页面四个图表切换的js数据交互
echarts同一页面四个图表切换的js数据交互
46 0
|
7月前
|
JavaScript 前端开发 数据可视化
js如何使用Echarts详解
js如何使用Echarts详解
|
8月前
|
JavaScript 索引 容器
echarts配置项,边框图片,js截取字符串
echarts配置项,边框图片,js截取字符串
|
9月前
|
JavaScript
vue.config.js的优化配置(element-ui, echarts, lodash按需加载 )(二)
vue.config.js的优化配置(element-ui, echarts, lodash按需加载 )(二)
|
9月前
|
前端开发 JavaScript
vue.config.js的优化配置(element-ui, echarts, lodash按需加载 )(一)
vue.config.js的优化配置(element-ui, echarts, lodash按需加载 )(一)
|
JavaScript 前端开发
echarts javascript框架
http://ecomfe.github.io/echarts
880 0
|
1天前
|
XML Web App开发 前端开发
字节FE:JavaScript学习路线图
字节FE:JavaScript学习路线图
9 0
|
1天前
|
存储 移动开发 JavaScript
学习javascript,前端知识精讲,助力你轻松掌握
学习javascript,前端知识精讲,助力你轻松掌握
|
1天前
|
JavaScript 前端开发 测试技术
学习JavaScript
【4月更文挑战第23天】学习JavaScript
14 1